事件之流：揭开 DOM 事件模型的神秘面纱

DOM，全称 Document Object Model，是 W3C 定义的一种文档对象模型，为访问 HTML 和 XML 文档提供了标准。当涉及到文档和浏览器交互时，事件就应运而生。事件是用户或浏览器执行的特定动作，记录了交互的瞬间，例如按钮的点击或鼠标的移动。

DOM 事件模型定义了事件处理的标准方式。它提供了一个事件流，了事件从触发到处理的路径。当发生事件时，它会首先触发触发该事件的元素。如果该元素没有为该事件注册处理程序，事件将冒泡到父元素，依此类推。

事件冒泡

事件冒泡是事件流中默认的事件传播机制。当一个事件触发时，它首先被触发该事件的元素捕获。如果该元素没有为该事件注册处理程序，事件将冒泡到父元素，再到祖父元素，依此类推，直到文档的根元素。

例如，考虑一个带有嵌套 <div> 元素的页面。如果用户在内部 <div> 上点击，事件将从内部 <div> 开始冒泡。如果内部 <div> 没有为该事件注册处理程序，它将冒泡到外部 <div>，然后是文档的根元素。

事件捕获

事件捕获提供了另一种事件传播机制。它允许元素在事件到达目标元素之前捕获事件。要启用事件捕获，必须在 addEventListener() 函数中指定 useCapture 参数。

与事件冒泡不同，事件捕获是从文档的根元素开始的。事件从根元素向下传播，直到到达目标元素。如果某个元素为该事件注册了处理程序，则事件将在该元素处理后停止传播。

事件处理

事件处理是响应事件的关键。可以使用 addEventListener() 或 attachEvent() 方法将处理程序附加到元素。处理程序是当事件发生时执行的函数。

在 JavaScript 中，可以使用 addEventListener() 方法附加处理程序：

element.addEventListener('click', function() {
  // 事件处理程序代码
});

实战应用

DOM 事件模型对于创建动态、响应式用户界面至关重要。它使元素能够对用户交互做出反应，并允许开发人员创建复杂的行为和动画。

例如，可以使用事件流在按钮单击时更改元素的颜色：

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

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

  button.addEventListener('click', function() {
    button.style.color = 'red';
  });
</script>

总结

DOM 事件模型提供了一种处理事件的标准方式，使其能够在文档中传播。通过理解事件流及其机制，开发人员可以创建强大、用户友好的 Web 应用程序。