与DOM来一场欢欣愉快的互动——事件机制的生动指南

2023-11-12 13:22:33

DOM事件机制：网页与用户的交互之桥

想象一下，当你在网上购物时，点击“购买”按钮后，商品就会神奇地加入购物车；又或者，当你滚动鼠标时，网页上的图片就会随之加载。这些看似理所当然的操作背后，都离不开DOM事件机制的支持。

DOM事件概述

DOM（文档对象模型）事件机制是网页与用户交互的基础。当用户与网页元素进行交互时，如点击、鼠标悬停、键盘输入等，就会触发相应的事件。这些事件可以被网页脚本捕获并进行处理，从而实现各种交互效果。

注册事件

在HTML中，可以使用addEventListener()方法来注册事件。该方法的第一个参数是事件类型，如"click"、"mouseover"、"keydown"等。第二个参数是事件处理程序，即当事件触发时要执行的函数。

<button id="my-button">点击我</button>

<script>
  const button = document.getElementById('my-button');

  // 为按钮注册点击事件
  button.addEventListener('click', function() {
    alert('你点击了按钮！');
  });
</script>

DOM事件流

当事件发生时，它会沿着DOM树向上冒泡，直到到达根元素。在这个过程中，事件会依次触发各个元素上的事件处理程序。这种事件传播方式称为事件冒泡。

<div id="parent">
  <button id="child">点击我</button>
</div>

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

  // 为父元素注册点击事件
  parent.addEventListener('click', function() {
    alert('你点击了父元素！');
  });

  // 为子元素注册点击事件
  child.addEventListener('click', function() {
    alert('你点击了子元素！');
  });
</script>

在上面的示例中，当点击子元素时，子元素上的事件处理程序和父元素上的事件处理程序都会被触发。这就是事件冒泡的体现。

事件捕获与事件冒泡是相反的事件传播方向。事件捕获是指事件从根元素向下捕获，直到到达触发事件的元素。

<div id="parent">
  <button id="child">点击我</button>
</div>

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

  // 为父元素注册捕获事件
  parent.addEventListener('click', function(e) {
    alert('你点击了父元素！');
    e.stopPropagation(); // 阻止事件冒泡
  }, true);

  // 为子元素注册点击事件
  child.addEventListener('click', function() {
    alert('你点击了子元素！');
  });
</script>

在上面的示例中，当点击子元素时，父元素上的事件处理程序会先于子元素上的事件处理程序被触发。这是因为我们在父元素上添加了true参数，表示启用事件捕获。

事件委托

事件委托是一种优化事件处理的方式。它通过将事件处理程序注册到父元素上，然后在处理程序中检查事件的target属性来确定触发事件的具体元素。这种方式可以减少事件处理程序的数量，提高代码的可维护性。

<div id="parent">
  <button id="child1">点击我</button>
  <button id="child2">点击我</button>
</div>

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

  // 为父元素注册点击事件
  parent.addEventListener('click', function(e) {
    if (e.target.id === 'child1') {
      alert('你点击了第一个子元素！');
    } else if (e.target.id === 'child2') {
      alert('你点击了第二个子元素！');
    }
  });
</script>