如何在 JavaScript 中创建事件监听器

事件（Event）是 JavaScript 中常用的一种交互模式，通过事件监听器（Event Listener），可以在特定的事件被触发时执行相应的 JavaScript 代码。本文将介绍如何在 JavaScript 中创建事件监听器。

添加事件监听器

在 JavaScript 中，可以通过 addEventListener() 方法来为指定的 HTML 元素添加事件监听器。addEventListener() 方法接受两个参数：

• 要监听的事件名称，例如 "click"、"mousemove" 等。
• 当事件被触发时需要执行的事件处理函数。

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

上述代码为 id 为 "myButton" 的按钮添加了一个 "click" 事件的监听器，当按钮被点击时会弹出 "Button clicked!" 的提示框。

移除事件监听器

在 JavaScript 中，可以通过 removeEventListener() 方法来移除指定的事件监听器。removeEventListener() 方法接受两个参数：

• 要移除的事件名称，需要与添加时使用的名称相同。
• 要移除的事件处理函数。

function buttonClicked() {
  alert("Button clicked!");
}

document.getElementById("myButton").addEventListener("click", buttonClicked);

// 移除事件监听器
document.getElementById("myButton").removeEventListener("click", buttonClicked);

上述代码为 id 为 "myButton" 的按钮添加了一个 "click" 事件的监听器，并在事件处理函数中定义了一个 buttonClicked() 函数；随后通过 removeEventListener() 来移除该事件监听器。

事件冒泡和捕获

在 HTML 中，如果同时为父元素和子元素添加了相同的事件监听器，当子元素被触发时，父元素的事件监听器也会被触发。这种事件传递方式称为事件冒泡（Bubbling）。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById("child").addEventListener("click", function() {
    alert("Button clicked!");
  });

  document.getElementById("parent").addEventListener("click", function() {
    alert("Parent clicked!");
  });
</script>

在上述代码中，当 id 为 "child" 的按钮被点击时，会先触发 "Button clicked!" 的提示框，随后又会触发 "Parent clicked!" 的提示框。

如果想要阻止事件冒泡，可以在事件处理函数中使用 event.stopPropagation() 方法。

document.getElementById("child").addEventListener("click", function(event) {
  alert("Button clicked!");
  event.stopPropagation(); // 阻止事件冒泡
});

document.getElementById("parent").addEventListener("click", function() {
  alert("Parent clicked!");
});

在上述代码中，当 id 为 "child" 的按钮被点击时，只会触发 "Button clicked!" 的提示框，而不会触发 "Parent clicked!" 的提示框。

除了事件冒泡外，还存在事件捕获（Capture）的传递方式。通过 addEventListener() 方法的第三个参数可以控制事件的传递方式。如果该参数为 true，则事件传递的顺序为事件捕获 -> 目标元素 -> 事件冒泡，如果为 false 或省略，则事件传递顺序为事件冒泡 -> 目标元素 -> 事件捕获。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById("child").addEventListener("click", function() {
    alert("Button clicked!");
  }, true);

  document.getElementById("parent").addEventListener("click", function() {
    alert("Parent clicked!");
  }, true);
</script>

在上述代码中，当 id 为 "child" 的按钮被点击时，会先触发 "Parent clicked!" 的提示框，随后又会触发 "Button clicked!" 的提示框。