揭秘 DOM 事件模型与机制：从捕获到冒泡，让网页互动起来

2023-10-12 16:57:21

DOM事件：解析网页交互背后的机制

导读

对于前端开发人员来说，掌握DOM事件模型和机制至关重要。这些概念是理解网页交互行为的基础，使您能够创建响应用户操作的动态应用程序。本文将深入探讨DOM事件模型，从事件捕获到事件冒泡，全方位解析事件处理流程，并提供清晰的示例代码。无论是初学者还是经验丰富的开发人员，都可以通过本文获得有益的见解。

什么是DOM事件模型？

DOM（文档对象模型）事件模型是一种处理网页中事件的机制。它允许网页元素对用户操作做出响应，例如鼠标点击、键盘输入、页面加载等。通过DOM事件模型，您可以将事件监听器附加到网页元素，并在特定事件发生时触发相应的代码。

DOM事件机制

DOM事件机制规定了事件的处理流程。当一个事件发生时，浏览器按照以下三个阶段进行处理：

事件捕获阶段 ：从根元素开始，沿着事件目标元素的父元素逐级向下查找，触发每个元素绑定的事件监听器。
事件目标阶段 ：当浏览器找到事件目标元素时，触发该元素绑定的事件监听器。
事件冒泡阶段 ：从事件目标元素开始，沿着事件目标元素的父元素逐级向上查找，触发每个元素绑定的事件监听器。

事件捕获与事件冒泡

事件捕获和事件冒泡是DOM事件机制中的两个关键概念：

事件捕获 ：事件捕获阶段发生在事件冒泡阶段之前。在此阶段，事件从根元素开始向下传播，沿途触发每个元素绑定的事件监听器。
事件冒泡 ：事件冒泡阶段发生在事件捕获阶段之后。在此阶段，事件从事件目标元素开始向上传播，沿途触发每个元素绑定的事件监听器。

示例代码

以下示例代码演示了如何使用DOM事件模型和机制处理网页上的事件：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>DOM事件示例</h1>
  <button id="my-button">点击我</button>

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

    // 给按钮绑定一个点击事件监听器
    button.addEventListener('click', function() {
      alert('你点击了按钮！');
    });
  </script>
</body>
</html>