dom.onclick 和 dom.addEventListener的区别

dom.onclick 和 dom.addEventListener的区别

一、两者基本信息：

dom.onclick：onclick 事件会在元素被点击时发生，可以在 HTML 和 JavaScript 中使用，所有的浏览器都支持 onclick 事件。

onclick 属性可以使用与所有 HTML 元素，除了：< base > , < bdo >, < br >, < head >, < html >, < iframe >, < meta >, < param >, < script >, < style >, 和 < title >。

dom.addEventListener：document.addEventListener() 方法用于向文档添加事件句柄。具有三个参数，分别是事件，触发执行的函数，以及是否在在捕获或冒泡阶段执行

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是可以使用 attachEvent() 方法来添加事件句柄

二、三者的区别：

事件监听器（addEventListener / attachEvent）

< a href = "//google.com" > Try clicking this link. </ a >

const element = document.querySelector('a');

element.addEventListener('click', event => event.preventDefault( console.log("Hello World"); ));

element.addEventListener('click', event => event.preventDefault( console.log("How are you?"); ));

element.click(）

// "Hello World"

// "How are you?"

如果不考虑性能等因素，可以添加无限数量的事件到该元素上，并且可以通过 removeEventListener() 移除事件

不能在 HTML 上使用，只能在< script >元素中添加。

有useCapture 参数，你可以选择是在捕获还是在冒泡阶段执行几乎适合所有浏览器，要是需要适应早期的，可以使用 attachEvent

分离文档结构 (HTML) 和逻辑 (JavaScript)，在大型的项目中开发便于维护更加好理解，获取元素，添加监听事件，如果发生就触发执行函数。

内联事件监听器

</a>