jQuery .on(); vs JavaScript .addEventListener();
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8996015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .on(); vs JavaScript .addEventListener();
提问by MonkeyCoder
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 DOMelements.
有人能解释一下为什么事件处理程序的执行顺序会根据它们的附加方式而有所不同吗？在下面的示例中，我使用.on()和.addEventListener()方法来处理不同DOM元素上的特定事件。
jsfiddle: http://jsfiddle.net/etsS2/
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 targetand moving up to the documentelement.
我认为在这个特定的例子中，事件处理程序的执行顺序将取决于event-bubbling- 所以从原始事件开始target并向上移动到document元素。
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 jQueryhandles events contrary to plain JavaScript?
如果我取消对on();版本的注释，一切都会按预期工作 -jQuery处理事件的方式与普通的有什么不同JavaScript吗？
采纳答案by Pointy
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.
当您.on()在文档级别使用时，您正在等待事件一直冒泡到该点。任何中间容器的事件处理程序都已经被调用。
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 lastlevel 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.
事件“冒泡”是浏览器查找在元素的父元素上注册的事件处理程序的过程，该元素是事件的实际原始接收者。它在 DOM 树中向上工作。文档级别是检查的最后一个级别。因此，您注册的处理程序.on()在达到该级别之前不会运行。同时，首先到达“外部”级别的另一个事件处理程序，并由浏览器执行。
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.
因此，return false;在注册的处理程序中，.on()它几乎没用，调用event.stopPropagation(). 除此之外，将本机事件处理程序注册与像 jQuery 这样的库所做的工作混合在一起可能是一个非常糟糕的主意，除非您非常清楚自己在做什么。
There was a question asked almost exactly like this onejust a little while ago today.
有一个问题问几乎完全是这样一个只是今天前一阵子小。
回答by James Allardice
Look at the addEventListenerversion:
看addEventListener版本：
document.getElementById('outer').addEventListener('mouseup', function (event) {
alert('This alert should not show up!');
}, false);
That works fine because the third argument is useCapture, which specifies whether or not the capture phase of the event should be used.
这很好用，因为第三个参数是useCapture，它指定是否应该使用事件的捕获阶段。
When you switch to the jQuery version:
当您切换到 jQuery 版本时：
$('#outer').on('mouseup', function (event) {
alert('This alert should not show up!');
}, false);
I think what is happening is the third argument simply overridesyour event handler function and causes the event handler to do nothing but return false;which is clearly not what is meant to happen.
我认为正在发生的事情是第三个参数只是覆盖了您的事件处理程序函数并导致事件处理程序什么都不做，但这return false;显然不是要发生的事情。
From the jQuery docs(emphasis added):
来自jQuery 文档（添加了重点）：
A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
触发事件时执行的函数。值 false 也可以作为简单返回 false 的函数的简写。
Remove the falseargument and the jQuery version will work correctly too:
删除false参数，jQuery 版本也将正常工作：
$('#outer').on('mouseup', function (event) {
alert('This alert should not show up!');
});
Note that the alertshouldshow up, so the addEventListenerapproach is working correctly. See @Pointy's answer for why that is.
请注意，alert应该会出现，因此该addEventListener方法可以正常工作。请参阅@Pointy 的答案，了解为什么会这样。
