JavaScript addEventListener()

JavaScript addEventListener() 方法用于向 HTML 元素添加事件监听器。

一般来说，我们在 HTML 中使用 onclick="function()" 添加事件，但这种添加事件的方式只能添加一个事件，并且有时并不够灵活。因此，我们推荐使用 JavaScript 的 addEventListener() 方法添加事件。

语法

element.addEventListener(event, function, useCapture);

参数说明：

• event：必需，字符串，表示事件名，如 "click"。
• function：必需，回调函数，即当事件被触发时，会执行该函数。
• useCapture：可选，布尔值，表示是否使用事件捕获（true/false，代表先从外层元素捕获事件，再处理内层元素的事件），默认为 false。

示例

<button id="myButton">点击我</button>

// 使用 addEventListener() 添加事件监听器
document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击啦！");
});

优势

使用 addEventListener() 添加事件监听器的优势有很多：

• 支持同时添加多个事件监听器
• 不会覆盖先前的事件监听器
• 支持事件捕获和冒泡
• 支持匿名函数和命名函数

注意事项

• addEventListener() 方法适用于所有 DOM 元素
• 事件名称不需要加 "on" 前缀，如"click"，而不是"onclick"
• 不能在 IE8 及更早版本中使用 addEventListener()，可以使用 attachEvent() 代替，但 attachEvent() 仅适用于 IE 浏览器。

总结：JavaScript addEventListener() 方法是添加事件监听器最有用的方式之一。在开发过程中，使用 addEventListener() 更加灵活，能够使代码更加模块化，更加容易维护。