先简单说明下addEventListener这个函数，代码如下：
1.window.onload = function(){
var a = document.getElementById("a");
a.addEventListener("click",function(){
console.log("a1");
})
a.addEventListener("click",function(){
console.log("a2");
})
}
输出结果：
a1
a2
2.
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
parent.addEventListener("click",function(){
console.log("parent");
})
child.addEventListener("click",function(){
console.log("child");
})
输出结果：
child
parent
3.parent.addEventListener("click",function(){
console.log("parent");
},true)
child.addEventListener("click",function(){
console.log("child");
})
输出结果：
parent
child
2.真正的问题来了，addEventListener vs on
摘自一段英文解答，有兴趣的同学可以看下：
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.
我的理解就是，前者可以在页面还没加载完，也就是DOM树还未生成的时候就可以执行，而on需要响应的控件渲染完毕才可以执行。
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
