jQuery .on();与 JavaScript .addEventListener(); [英] jQuery .on(); vs JavaScript .addEventListener();

问题描述

有人能解释一下为什么事件处理程序的执行顺序会根据它们的附加方式而有所不同吗?在下面的示例中，我使用 .on() 和 .addEventListener() 方法来处理不同 DOM 元素上的特定事件.

jsfiddle:http://jsfiddle.net/etsS2/p>

我认为在这个特定示例中，事件处理程序的执行顺序将取决于 event-bubbling - 所以从原始事件 target 并向上移动到 document 元素.

document.getElementById('outer').addEventListener('mouseup', function (event) {//$('#outer').on('mouseup', function (event) {alert('这个警告不应该出现！');}， 错误的);

如果我取消注释 on(); 版本，一切都会按预期工作 - jQuery 处理事件的方式与普通 JavaScript?

解决方案

当您在文档级别使用 .on() 时，您一直在等待事件冒泡那一点.任何中间容器的事件处理程序都已被调用.

事件冒泡"是浏览器查找向作为事件的实际原始接收者的元素的父级注册的事件处理程序的过程.它在 DOM 树中向上工作.文档级别是检查的最后级别.因此，您使用 .on() 注册的处理程序在达到该级别之前不会运行.同时，首先到达外部"级别的另一个事件处理程序，并由浏览器执行.

因此，使用 .on() 注册的处理程序中的 return false; 几乎没有用，就像调用 event.stopPropagation().除此之外，将原生事件处理程序注册与像 jQuery 这样的库所做的工作混合起来可能是一个非常糟糕的主意，除非你真的知道自己在做什么.

不久前有一个几乎与此类似的问题今天.

Can someone explain me why is there a difference in the order in which the event handlers are being executed depending on how they have been attached? In the example below I'm using the .on() and .addEventListener() methods to handle a specific event on different DOM elements.

jsfiddle: http://jsfiddle.net/etsS2/

I thought that in this particular example the order in which the event handlers are going to be executed will depend on the event-bubbling - so starting from the original event target and moving up to the document element.

document.getElementById('outer').addEventListener('mouseup', function (event) {
//$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

If I uncomment the on(); version everything works as expected - is there a difference in how jQuery handles events contrary to plain JavaScript?

解决方案

When you use .on() at the document level, you're waiting for the event to bubble all the way up to that point. The event handler for any intermediate container will already have been called.

Event "bubbling" is the process by which the browser looks for event handlers registered with parents of the element that was the actual original recipient of the event. It works upwards in the DOM tree. The document level is the last level checked. Thus, your handler registered with .on() won't run until that level is reached. In the meantime, the other event handler at the "outer" level is reached first and it is executed by the browser.

Thus, that return false; in the handler registered with .on() is pretty much useless, as would be a call to event.stopPropagation(). Beyond that, mixing native event handler registration with the work that a library like jQuery will do is probably a really bad idea unless you seriously know what you're doing.

There was a question asked almost exactly like this one just a little while ago today.

这篇关于jQuery .on();与 JavaScript .addEventListener();的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！