JavaScript HTML DOM EventListener

天天向上

发布： 2025-02-27 23:49:58

原创

213 人浏览过

EventListener 是 JavaScript 中用于为 DOM 元素绑定事件处理程序的一种方法。它允许我们在事件发生时调用指定的函数，并且能够为同一个事件绑定多个处理程序。

1. `addEventListener()` 方法

addEventListener() 方法用于将事件监听器添加到指定的元素。它的语法如下：

element.addEventListener(event, function, useCapture);

event：指定要监听的事件类型，如 "click"、"mouseover" 等。
function：当事件触发时调用的回调函数。
useCapture（可选）：一个布尔值，表示事件是否应该在捕获阶段触发。默认为 false，即在事件冒泡阶段触发。

示例：

<button id="btn">Click Me!</button>

<script>
  const btn = document.getElementById('btn');

  // 为按钮绑定点击事件
  btn.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

在上面的例子中，当用户点击按钮时，事件监听器会触发并执行绑定的回调函数。

2. 事件捕获与事件冒泡

事件监听器可以通过 useCapture 参数控制事件传播的方式：

事件冒泡（默认行为）：事件从目标元素开始，逐层向上冒泡至 document。
事件捕获：事件从 document 或其他父元素开始，逐层向下传播，直到目标元素。

示例：事件捕获与冒泡

<div id="parent">
  <button id="child">Click Me!</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // 捕获阶段（先触发）
  parent.addEventListener('click', function() {
    alert('Parent clicked during capture!');
  }, true);

  // 冒泡阶段（后触发）
  child.addEventListener('click', function() {
    alert('Child clicked!');
  });
</script>

在这个示例中，由于 parent 的事件监听器在捕获阶段（通过传入 true），所以它会先触发，而 child 的事件监听器在冒泡阶段（默认）。

3. 移除事件监听器

如果你不再需要某个事件监听器，可以使用 removeEventListener() 方法移除它。要移除事件监听器，必须使用与添加时相同的事件类型、回调函数和 useCapture 值。

语法：

element.removeEventListener(event, function, useCapture);

示例：

<button id="btn">Click Me!</button>

<script>
  const btn = document.getElementById('btn');

  function handleClick() {
    alert('Button clicked!');
  }

  // 绑定事件
  btn.addEventListener('click', handleClick);

  // 移除事件
  btn.removeEventListener('click', handleClick);
</script>

在这个示例中，事件监听器被成功移除，因此按钮点击时不会触发 handleClick 函数。

4. `EventListener` 的优势

多个事件处理器：你可以为同一事件绑定多个事件处理程序，而不必担心覆盖或删除其他处理程序。
事件捕获与冒泡：你可以精确控制事件的传播方式（捕获或冒泡）。
支持移除：使用 removeEventListener() 可以清除不再需要的事件监听器，从而提高性能。

5. 事件对象

每个事件都会传递一个事件对象，该对象包含关于事件的详细信息，例如事件类型、触发事件的元素等。

常见的事件对象属性：

target：触发事件的元素。
type：事件类型（如 'click'、'keydown' 等）。
clientX, clientY：鼠标点击位置的 X 和 Y 坐标（相对于视口）。
keyCode：键盘事件中的按键代码。
preventDefault()：阻止事件的默认行为。
stopPropagation()：阻止事件进一步传播。

示例：

<button id="btn">Click Me!</button>

<script>
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(event) {
    alert('Event type: ' + event.type);
    alert('Button clicked at: ' + event.clientX + ', ' + event.clientY);
  });
</script>

6. 总结

addEventListener()：为元素绑定事件，支持事件冒泡和捕获。
事件捕获与冒泡：事件的传播顺序，可以通过 useCapture 参数控制。
移除事件：使用 removeEventListener() 移除事件监听器。
事件对象：每个事件都包含一个事件对象，提供有关事件的详细信息。

EventListener 方法是处理事件的推荐方式，它比传统的事件属性（如 onclick）更灵活和强大，可以让我们更好地管理和控制事件。

更多详细内容请关注其他相关文章。

1. addEventListener() 方法

示例：