jQuery $（window）.blur vs native window.onblur

Question

使用jQuery有什么好處

$(window).blur(function() { ... })

附加事件處理程序與直接設置它

window.onblur = function() { ... }

似乎后者不太健壯，因為它只支持一個模糊處理程序，並且當與其他包一起使用時，其他代碼可能會用另一個函數覆蓋window.blur值。 但是，這也不會發生在jQuery實現上，這可能會使用window.blur作為其底層實現嗎？

編輯：有些人還提到了window.addEventListener替代方法，除了上面的方法之外，它還可用於添加'onblur'事件。

Answer 1

$(window).blur(function() { ... })

允許您添加一個或多個事件處理程序。

---

window.onblur = function() { ... }

讓您只有一個處理模糊事件的事件處理程序。

---

前者使用jQuery自己的事件句柄機制。 對.blur()的調用將委托給jQuery.fn.on() ，后者將委托給jQuery.event.add 。 這個add()方法將為給定的事件類型創建它自己的處理程序，並告訴addEventListener()在觸發給定類型的事件時調用此處理程序。 所以基本上jQuery有自己的事件處理方式，它依賴於addEventListener()來正確執行。

后者只是一個只能包含一個值的屬性，因此排隊事件處理程序是不可能的。

我寫了一個小演示來證明這一點： http ： //jsfiddle.net/GnNZm/1/

Answer 2

使用jQuery方法，您可以附加多個事件處理程序。 通過設置window.onblur ，您只能擁有一個處理程序。

純JavaScript也有這個： window.addEventListener() 。 事實上，我確信jQuery在內部使用它。 （ 是的，他們這樣做 。）

（編輯） window.onblur屬性基本上是設置單個處理程序的快捷方式。 使用addEventListener() （或jQuery包裝器）基本上創建了一個事件處理程序列表，這些事件在事件發生時都會被觸發。 我沒有測試過，但我認為你甚至可以將兩者結合使用。 因為它是一個列表而不是單個值，所以多個處理程序不應相互干擾。 它們也可以單獨移除或一次移除。

jQuery的事件處理程序，使用on() ，也可以讓你的處理程序命名空間，以防止插件刪除其處理程序時發生沖突。 純JS似乎沒有這么容易。

Answer 3

對於jquery模糊

模糊事件在Internet Explorer中不會出現氣泡。 因此，依賴於使用模糊事件的事件委派的腳本將無法在瀏覽器中一致地工作。 但是，從版本1.4.2開始，jQuery通過將模糊映射到其事件委托方法.live（）和.delegate（）中的focusout事件來解決此限制。

取自jquery doc https://api.jquery.com/blur/

此外，jquery允許您綁定多個事件處理程序

Answer 4

附加事件時，可能會覆蓋已附加到事件處理程序的事件。 這通常發生在window.onload（）中，其中不同的腳本覆蓋了彼此的事件處理程序。

例如：

//lightbox.js
window.onload = function() { /* do lightbox stuff */ }

//carousel.js 
window.onload = function() { /* do carousel stuff */ }

所以常見的做法是這樣的：

var existing_event_handlers = window.onload;
window.onload = function(){

    //my event code
    alert('onready fired');

    //call other event handlers after
    existing_event_handlers();
} 

使用window.onblur = function() { ... }仍然有一個優勢，因為您可以專門指定您是否希望在其他附加事件之前或之后觸發事件。

像許多其他已經指出的答案一樣，jQuery從大多數瀏覽器差異中抽象出來。 IE9之前的版本使用了attachEvent（）而不是addEventListener（）。