🌟 JS 事件监听机制全解析：从 DOM 到事件委托，一篇搞定！

在前端开发中，事件处理是 JavaScript 与用户交互的核心。理解 JS 的事件机制不仅能写出更健壮的代码，还能避免常见的性能陷阱。本文将带你系统梳理：

• 事件如何发生？
• 捕获 vs 冒泡阶段
• 如何正确监听事件？
• 为什么推荐“事件委托”？
• 常见误区与最佳实践

---

🧱 一、事件是如何发生的？——DOM 与事件流

页面虽然是“画出来”的平面，但浏览器内部维护着一棵 DOM 树。当用户点击某个元素时，事件并不是直接“砸”到目标上，而是经历一个完整的 事件流（Event Flow） ：

事件流三阶段（W3C 标准）：

1. 捕获阶段（Capture Phase）

   • 从 document 开始，逐层向下传递到目标元素的父级。

2. 目标阶段（Target Phase）

   • 事件到达实际触发的元素（即 event.target）。

3. 冒泡阶段（Bubble Phase）

   • 从目标元素向上冒泡，逐层回到 document。

✅ 谁先执行？
默认情况下（useCapture = false），监听器在冒泡阶段执行；若设为 true，则在捕获阶段执行。

---

⚙️ 二、如何监听事件？——DOM 0 级 vs DOM 2 级

❌ DOM 0 级事件（不推荐）

js
编辑
element.onclick = function() { /* ... */ };

• 缺点：只能绑定一个处理函数，覆盖写；无法控制捕获/冒泡；模块化差。

✅ DOM 2 级事件（标准做法）

js
编辑
element.addEventListener('click', handler, useCapture);

• 优点：可绑定多个监听器；支持指定阶段；更灵活可控。
• useCapture：布尔值，默认 false（冒泡阶段执行）。

🔔 注意：addEventListener 必须作用于单个 DOM 节点，不能直接用于 NodeList（如 querySelectorAll 返回的结果）。

---

🎯 三、实战：为什么推荐“事件委托”？

问题场景

假设有一个 <ul> 包含多个 <li>，你想点击任意 <li> 都能响应：

html
预览
<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

❌ 错误做法：遍历绑定（性能差）

js
编辑
const lis = document.querySelectorAll('#list li');
lis.forEach(li => {
  li.addEventListener('click', () => console.log(li.textContent));
});

• 问题：每个 <li> 都占用内存，数量多时开销大；动态新增 <li> 无法自动绑定。

✅ 正确做法：事件委托（Event Delegation）

js
编辑
document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('点击了:', event.target.textContent);
  }
});

• 原理：利用事件冒泡，在父容器监听，通过 event.target 判断实际点击元素。

• 优势：

  • 只需一个监听器，节省内存；
  • 自动支持动态添加的子元素；
  • 代码更简洁、可维护性高。

---

🔥 四、捕获 vs 冒泡：执行顺序演示

html
预览
<div id="parent" style="width:200px; height:200px; background:red;">
  <div id="child" style="width:100px; height:100px; background:blue;"></div>
</div>

<script>
document.body.addEventListener('click', () => console.log('body'), true); // 捕获
document.getElementById('parent').addEventListener('click', () => console.log('parent'));
document.getElementById('child').addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止冒泡
  console.log('child');
});
</script>

点击蓝色区域（child）时输出：

text
编辑
body        ← 捕获阶段（true）
child       ← 目标阶段 + stopPropagation()
// parent 不会输出！因为冒泡被阻止了

💡 stopPropagation() 会同时阻止捕获和冒泡后续传播（但不会影响当前阶段已注册的其他监听器）。

---

📌 五、关键总结 & 最佳实践

✅ 核心要点

概念	说明
事件流	捕获 → 目标 → 冒泡
addEventListener	推荐使用，支持多监听、阶段控制
event.target	实际触发事件的元素（可能不是绑定监听器的元素）
事件委托	利用冒泡，在父级统一处理子元素事件，高效且灵活