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允许您绑定多个事件处理程序