前端面试之onclick与addEventListener区别

前些天面试官问了这么一个问题：onclick 与 addEventListener 有哪些区别呢

很好问住了，自己答得不太满意，下来自己查了查红宝书第17章事件和MDN，大概了解了是怎么一回事

上来先把答案摆上：

区别

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

允许给一个事件注册多个监听器特别是在使用AJAX 库，JavaScript模块，或其他需要第三方库/插件的代码提供了一种更精细的手段控制 listener 的触发阶段（可以选择捕获或者冒泡）它对 任何 DOM 元素 都是有效的，而不仅仅只对 HTML 元素有效。它注册的事件可以通过 removeEventListener来移除也就是说若添加的是匿名事件函数就无法移除了this 的值是触发事件的元素的引用console.log(e.currentTarget === this) // true

而 onclick 是 注册 listener 的旧方法

该方法会替换掉这个元素上所有已存在的onclick事件，其他on事件也是类似的。无法精细控制冒泡与否等移除可通过直接将onclick事件替换为null兼容性

addEventListener 在DOM 2 Events 规范中引入

在IE 9之前，必须使用 attachEvent 而不是使用addEventListenerattachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素

而 onclick 是 DOM 0 规范的基本内容

几乎所有浏览器都支持，而且不需要特殊的跨浏览器兼容代码因此通常这个方法被用于动态地注册事件处理器，除非必须使用 addEventListener() 才能提供的特殊特性addEventListener

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

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

addEventListener 中有三个参数，type、listener 和 useCapture，其中第一个参数为 事件类型（click、mousemove 等，第二个参数为事件的回调函数，第三个参数为一个指定有关 listener 属性的可选参数对象，需注意的是：

在旧版本的DOM的规定中， addEventListener()的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序。随着时间的推移，很明显需要