剖析 DOM 事件流的流动与妙用：巧妙驾驭事件的传播与委托

2024-01-30 22:40:40

DOM 事件流的流动

当一个 HTML 元素产生一个事件时，该事件会从该元素节点开始，沿着元素节点与根结点之间的路径向上传播，这个过程称为事件冒泡。在事件冒泡过程中，事件会依次触发路径上的每个元素节点的事件处理程序。

例如，假设我们在 HTML 文档中有一个按钮元素 <button id="myButton">，并在其上注册了一个点击事件处理程序。当用户点击按钮时，点击事件会首先触发 <button> 元素的事件处理程序，然后依次触发父元素 <div>、<body> 和 <html> 的事件处理程序，直到事件传播到根结点 <html> 为止。

事件冒泡与事件捕获

事件冒泡是一种自下而上的事件传播方式，事件从元素节点向上传播，依次触发路径上的每个元素节点的事件处理程序。而事件捕获则是一种自上而下的事件传播方式，事件从根结点向下传播，依次触发路径上的每个元素节点的事件处理程序。

我们可以通过在事件监听函数的第三个参数中指定 {capture: true} 来启用事件捕获。例如，以下代码使用事件捕获来监听 <button> 元素的点击事件：

document.querySelector('#myButton').addEventListener('click', function(event) {
  console.log('事件捕获：按钮被点击了！');
}, true);

事件委托

事件委托是一种事件处理技术，它允许我们通过给父元素注册事件处理程序来处理子元素的事件。这可以简化事件处理逻辑，提高代码的可维护性。

例如，假设我们有一个包含多个 <li> 元素的 <ul> 列表，我们希望在用户点击列表中的任何一个 <li> 元素时都触发同一个事件处理程序。我们可以使用事件委托来实现这个功能：

document.querySelector('ul').addEventListener('click', function(event) {
  // 检查事件的目标元素是否为 `<li>` 元素
  if (event.target.nodeName === 'LI') {
    console.log('事件委托：列表项被点击了！');
  }
});

通过使用事件委托，我们可以避免为列表中的每个 <li> 元素注册单独的事件处理程序，从而简化了代码。

结语

DOM 事件流是 JavaScript 中一种重要的事件处理机制，它允许我们监听和处理 HTML 元素的各种事件。通过理解 DOM 事件流的流动及其传播路径，我们可以更有效地处理事件，实现复杂的交互功能。事件冒泡、事件捕获和事件委托是 DOM 事件流中的三个核心概念，掌握这些概念可以帮助我们更好地驾驭事件的传播与委托，开发出更具交互性的 web 应用。