深入了解 JavaScript DOM 事件流

前言

在学习了几天 JavaScript 的 DOM 事件后，我们来学习一下 JavaScript 的 DOM 事件流。DOM 事件流了事件在 HTML 文档中的传播路径，它帮助我们更好地理解事件处理的机制，并能够更加有效地处理事件。

DOM 事件流

当一个事件发生时，它会在文档中传播，这个传播路径称为事件流。事件流有两种主要类型：事件冒泡和事件捕获。

事件冒泡

事件冒泡是事件流的默认行为。当一个事件发生时，它会从事件目标开始，然后向上冒泡到父元素，依次向上，直到到达根元素。在这个过程中，事件会触发所有沿途元素上的事件处理程序。

例如，我们给一个目标元素绑定点击事件，然后我们点击了这个元素。首先，点击事件会在目标元素上触发，然后向上冒泡到父元素，再向上冒泡到祖先元素，依次向上，直到到达根元素。在这个过程中，点击事件会触发所有沿途元素上的点击事件处理程序。

事件捕获

事件捕获是事件流的另一种行为。与事件冒泡不同，事件捕获是从根元素开始，然后向下捕获到子元素，依次向下，直到到达事件目标。在这个过程中，事件会触发所有沿途元素上的事件处理程序。

为了使用事件捕获，我们需要在添加事件监听器时指定第三个参数为 true。例如，我们可以使用以下代码来给目标元素绑定一个点击事件捕获处理程序：

element.addEventListener('click', function(event) {
  // 事件捕获处理程序
}, true);

当我们点击目标元素时，点击事件会首先触发事件捕获处理程序，然后向下捕获到子元素，依次向下，直到到达事件目标。在这个过程中，点击事件会触发所有沿途元素上的点击事件捕获处理程序。

事件目标

事件目标是指触发事件的元素。在事件流中，事件目标是事件传播的起点。例如，当我们点击一个按钮时，按钮元素就是事件目标。

我们可以使用 event.target 属性来获取事件目标。例如，我们可以使用以下代码来获取点击事件的目标元素：

const target = event.target;

事件委托

事件委托是一种处理事件的技巧。它可以减少事件处理程序的数量，提高代码的可维护性。

事件委托的工作原理是将事件监听器添加到父元素上，然后在事件处理程序中检查事件目标。如果事件目标是父元素的子元素，则触发相应的事件处理程序。

例如，我们可以使用以下代码来给一个父元素绑定一个点击事件委托处理程序：

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    // 触发按钮元素的点击事件处理程序
  }
});

当我们点击父元素中的按钮元素时，点击事件会首先触发父元素的点击事件委托处理程序。然后，处理程序会检查事件目标是否是按钮元素。如果是，则触发按钮元素的点击事件处理程序。

总结

DOM 事件流是 JavaScript 中处理事件的重要概念。它了事件在 HTML 文档中的传播路径，包括事件冒泡和事件捕获两种行为。事件目标是指触发事件的元素。事件委托是一种处理事件的技巧，可以减少事件处理程序的数量，提高代码的可维护性。