jQuery .on(); vs JavaScript .addEventListener();

有人可以解释我为什么在事件处理程序的执行顺序有区别，这取决于它们是如何附加的？在下面的示例中，我使用.on()和.addEventListener()方法来处理不同DOM元素上的特定事件。

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

我认为在这个特定的例子中，事件处理程序将被执行的顺序将取决于事件冒泡 – 从原始事件目标开始，并向上移动到文档元素。

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

如果我取消注释on();版本一切正常工作 – 有什么区别，如何jQuery处理事件与纯JavaScript？

解决方法

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

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

因此，返回假;在注册了.on()的处理程序几乎没有用，因为是对event.stopPropagation()的调用。除此之外，将本地事件处理程序注册与像jQuery这样的库所做的工作混合可能是一个非常糟糕的主意，除非你真正知道你在做什么。

今天有一天是a question asked almost exactly like this one。