onclick只出现一次alert：我是click2【很正常第一次click事件会被第二次所覆盖】，但是addEventListener却可以先后运行，不会被覆盖【正如：它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】
<ul id="color-list"> <li id="addEvent">red</li> <li id="on_click">yellow</li> </ul> <script type="text/javascript"> (function(){ var addEvent = document.getElementById("addEvent"); addEvent.addEventListener("click",function(){ alert("我是addEvent1"); },false); addEvent.addEventListener("click",function(){ alert("我是addEvent2"); },false); var addEvent = document.getElementById("on_click"); on_click.onclick = function() { alert("我是click1"); } on_click.onclick = function() { alert("我是click2"); } })(); </script>
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：
元素的点击事件先触发，然后会触发
元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
元素的点击事件先触发 ，然后再触发元素的点击事件。
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
原文：https://www.cnblogs.com/SallyShan/p/11489057.html