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（）。