JavaScript | addEventListener() 与示例

addEventListener() 方法是 JavaScript 中常用的一种添加事件的方式。它可以在 HTML 元素上添加一个或多个事件，并指定要执行的函数。

语法

element.addEventListener(event, function, useCapture);

参数说明：

• event 参数为要添加的事件类型，比如 "click"、"mouseover" 等。
• function 参数为当事件触发时要执行的函数。
• useCapture 参数可选，它指定事件是否在捕获或冒泡阶段执行。其默认值为 false，即只在冒泡阶段执行。

示例

下面是一个示例，演示如何在 button 元素上添加一个 click 事件：

// 获取元素
const myButton = document.querySelector('#myButton');

// 添加事件
myButton.addEventListener('click', function() {
  alert('Hello, world!');
});

这样，当用户单击 myButton 按钮时，会弹出一个带有 "Hello, world!" 文字的警告框。

如果要添加多个事件，可以在同一个元素上多次调用 addEventListener() 方法。例如：

// 获取元素
const myButton = document.querySelector('#myButton');

// 添加事件
myButton.addEventListener('click', function() {
  alert('Hello, world!');
});

myButton.addEventListener('mouseover', function() {
  myButton.style.backgroundColor = 'yellow';
});

myButton.addEventListener('mouseout', function() {
  myButton.style.backgroundColor = '';
});

这个示例会在 myButton 按钮上添加三个事件：单击事件、鼠标指针移动到按钮上时的事件，以及鼠标指针从按钮上移开时的事件。其中单击事件将弹出一个警告框，鼠标指针移动到和移开时，按钮的背景颜色也会发生变化。

注意事项

• 如果同一个 HTML 元素上添加了多个相同类型的事件，它们会按照添加的顺序依次触发。
• 如果要移除已添加的事件，可以使用 removeEventListener() 方法。
• 在某些情况下，添加事件时可能需要手动指定捕获或冒泡阶段，以便正确地处理事件。具体可以参考 MDN 的文档。