26、addEventListener()和onClick()的区别

26.1 结论

1. onclick事件在同一时间只能指向唯一对象
2. addEventListener给一个事件注册多个listener
3. addEventListener对任何DOM都是有效的，而onclick仅限于HTML
4. addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除
5. IE9使用attachEvent和detachEvent

26.3 实例

addEventListener()可以为事件目标注册事件处理程序。

作用：

将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest。

语法（MDN——addEventListener）

• 一般它接受三个参数，
• type：表示监听事件类型的字符串。但他不包括设置事件处理程序属性的前缀on
• listener：必须是一个实现了 EventListener 接口的对象，或者是一个函数。
• options：可选参数，一个指定有关 listener 属性的可选参数对象。可用的选项如下：
  capture: true表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。当布尔值为false时，代表事件冒泡：
• useCapture： 可选

<button id="mybutton">click me</button>
<script>
  var b = document.getElementById("mybutton")
  b.onclick = function () {
    alert('onclick')  //会被覆盖
  }
  b.onclick = function () {
  	alert('onclick2')  //会被触发
  }
  b.addEventListener('click', function () {
    alert('addEventListener')  //会被触发
  }, false)
</script>

• 以click参数调用addEventListener并不会影响到onclick的值，但如果是两个onclick后面一个会覆盖前面一个。以上代码会alert两次。
• 同时更重要的是，能通过多次调用addEventListener，为同一个目标，同一种注册类型，注册不同的处理函数。当对象上发生点击事件时，所有该时间类型的注册处理程序都会按照注册的顺序调用。

参考文章

onclick与addEventListener区别