element.addEventListener() 方法 详细解析与代码示例

element.addEventListener() 方法用于向指定的元素添加事件监听器。

语法:

element.addEventListener(event, function, useCapture);

参数说明:

• event：表示要监听的事件类型，比如 "click"、"mouseover"、"keydown" 等等。
• function：表示当事件触发时要执行的函数。
• useCapture：可选参数，一个布尔值，表示是否在捕获阶段触发事件，默认为 false。

示例代码:

// 获取元素
var button = document.getElementById("myButton");

// 添加点击事件监听器
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", function() {
  console.log("Mouse over the button!");
});

在上面的示例中，我们获取了一个具有 id 为 "myButton" 的元素，并为它添加了两个事件监听器。当按钮被点击或者鼠标悬停在按钮上时，对应的函数就会被触发，分别输出相应的信息。

注意事项:

• addEventListener() 方法添加的事件监听器不会覆盖已存在的事件监听器，它们会按顺序执行。
• 如果要移除事件监听器，可以使用 removeEventListener() 方法。
• 通过 addEventListener() 方法添加的事件监听器可以为同一个元素的不同事件类型添加多个监听器。
• 当事件触发时，相关的函数中的 this 关键字指向绑定事件的元素。