javascript jQuery $(window).blur 与原生 window.onblur

jQuery $(window).blur vs native window.onblur

提问by Andrew Mao

What are the advantages of using jQuery's

使用 jQuery 的优点是什么

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

to attach an event handler versus setting it directly with

附加事件处理程序而不是直接设置它

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

It seems that the latter is less robust because it only supports one blur handler, and when used with other packages, other code might override the window.blurvalue with another function. However, couldn't this also happen with the jQuery implementation too, which presumably uses window.bluras its underlying implementation?

后者似乎不太健壮，因为它只支持一个模糊处理程序，并且当与其他包一起使用时，其他代码可能会window.blur用另一个函数覆盖该值。但是，这难道不会也发生在 jQuerywindow.blur实现上吗，它大概用作其底层实现？

EDIT:Several people have also mentioned the window.addEventListeneralternative, which can be used to add an 'onblur'event apart from the methods above.

编辑：有几个人也提到了window.addEventListener替代方法，'onblur'除了上述方法之外，它还可用于添加事件。

回答by Bart

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

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

Lets you add one or moreevent handlers.

允许您添加一个或多个事件处理程序。

---

---

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

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

Lets you only have oneevent handler handling the blur event.

让您只有一个事件处理程序来处理模糊事件。

---

---

The former uses the jQuery's own event handle mechanism. The call to .blur()will delegate to jQuery.fn.on()which in turn will delegate to jQuery.event.add. This add()method will create it's own handler for the given event type and tell addEventListener()to call this handler whenever a event of given type is fired. So basically jQuery has it's own way of event handling which relies on addEventListener()to execute properly.

前者使用jQuery自己的事件处理机制。对 的调用.blur()将委托给jQuery.fn.on()，而后者又将委托给jQuery.event.add。此add()方法将为给定的事件类型创建它自己的处理程序，并告诉addEventListener()在触发给定类型的事件时调用此处理程序。所以基本上 jQuery 有它自己的事件处理方式，它依赖于addEventListener()正确执行。

The latter is just an attribute which can only contain one value so queueing event handlers is impossible.

后者只是一个只能包含一个值的属性，因此不可能对事件处理程序进行排队。

I wrote a little demonstration to prove this point: http://jsfiddle.net/GnNZm/1/

我写了一个小演示来证明这一点：http: //jsfiddle.net/GnNZm/1/

回答by Scimonster

With the jQuery method, you can attach multiple event handlers. By setting window.onblur, you can only have a single handler.

使用 jQuery 方法，您可以附加多个事件处理程序。通过设置window.onblur，您只能拥有一个处理程序。

Pure JavaScript also has this: window.addEventListener(). In fact, i'm sure jQuery uses this internally. (Yes they do.)

纯 JavaScript 也有这个：window.addEventListener(). 事实上，我确信 jQuery 在内部使用它。（是的，他们这样做。）

(EDIT) The window.onblurproperty is basically a shortcut for setting a single handler. Using addEventListener()(or the jQuery wrapper) basically creates a list of event handlers, which all get fired when the event happens. I haven't tested, but i think you can even use the two together. Because it's a list, not a single value, multiple handlers shouldn't interfere with each other. They can also be removed separately or all at once.

（编辑）该window.onblur属性基本上是设置单个处理程序的快捷方式。使用addEventListener()（或 jQuery 包装器）基本上创建了一个事件处理程序列表，当事件发生时，它们都会被触发。我还没有测试过，但我认为你甚至可以将两者一起使用。因为它是一个列表，而不是单个值，所以多个处理程序不应相互干扰。它们也可以单独或一次性全部移除。

jQuery's event handlers, using on(), also let you namespace your handlers, to prevent clashes if a plugin removes its handlers. Pure JS doesn't seem to have this easily.

jQuery 的事件处理程序， using on()，还允许您命名处理程序，以防止在插件删除其处理程序时发生冲突。纯 JS 似乎并不容易。

回答by Huangism

For jquery blur

对于 jquery 模糊

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

模糊事件不会在 Internet Explorer 中冒泡。因此，依赖于带有 blur 事件的事件委托的脚本将无法在浏览器中一致地工作。然而，从 1.4.2 版本开始，jQuery 通过在其事件委托方法 .live() 和 .delegate() 中将模糊映射到焦点事件来解决此限制。

taken from jquery doc https://api.jquery.com/blur/

取自 jquery 文档https://api.jquery.com/blur/

Also jquery allows you bind multiple event handlers

jquery 还允许您绑定多个事件处理程序

回答by Chris Gunawardena

When you attach an event there is the possibility of overwriting an event already attached to an event handler. This used to happen a lot with window.onload() where different scripts overwrote each others event handlers.

附加事件时，有可能覆盖已附加到事件处理程序的事件。这在 window.onload() 中经常发生，不同的脚本会覆盖彼此的事件处理程序。

eg:

例如：

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

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

So the common practice used to be something like this:

所以通常的做法是这样的：

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

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

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

Using window.onblur = function() { ... }still has an advantage because you can specifically dictate if you want your event fired before or after other attached events.

使用window.onblur = function() { ... }仍然有一个优势，因为您可以明确规定您的事件是在其他附加事件之前还是之后触发。

Like many other answers already pointed out jQuery abstracts you from most browser differences. Version before IE9 used attachEvent() rather than addEventListener().

就像许多其他已经指出的答案一样，jQuery 将您从大多数浏览器差异中抽象出来。IE9 之前的版本使用 attachEvent() 而不是 addEventListener()。