前端核心：彻底搞懂 JavaScript 事件流

在前端开发中，事件流是处理 DOM 交互的核心概念，它决定了事件在 DOM 树中的传播路径和触发顺序。理解事件流，是写出健壮、可维护交互代码的基础。

一、事件流与两个阶段说明

事件流描述的是当 DOM 元素触发事件后，事件在整个 DOM 树中的传播路径、顺序和触发规则。很多资料只提及 “捕获” 和 “冒泡” 两个阶段，而完整的事件流其实包含三个不可分割的阶段，且严格按照以下顺序执行：

1. 事件捕获阶段：事件从最顶层的 document 开始，沿着 DOM 树向下传播，直到到达目标元素。
2. 目标阶段：事件到达实际触发的目标元素。
3. 事件冒泡阶段：事件从目标元素开始，沿着 DOM 树向上回溯，直到回到 document。

💡 注意：我们通常所说的 “两个阶段”，指的就是捕获阶段和冒泡阶段。

二、事件捕获

事件捕获是 从父元素到子元素（从顶层到目标）的传播过程，事件会优先触发外层祖先元素的事件处理函数，再逐层向下，直到到达目标元素的上层节点。
要绑定捕获阶段的事件，需要给 addEventListener() 方法传递第三个参数为 true（显式指定在捕获阶段触发）。

// 为父元素和子元素分别绑定捕获阶段的事件constparent=document.getElementById('parent');constchild=document.getElementById('child');parent.addEventListener('click',()=>{console.log('父元素捕获阶段触发');},true);// 第三个参数为true，表示在捕获阶段触发child.addEventListener('click',()=>{console.log('子元素捕获阶段触发');},true);

点击子元素时

父元素捕获阶段触发 子元素捕获阶段触发

三、事件冒泡：自下而上的默认传播

事件冒泡是从子到父的传播过程。在这个阶段，事件会从目标元素开始，依次向上触发每个父元素的事件处理函数，直到传播到 document。
这是浏览器的默认行为，也是我们日常开发中最常接触的阶段。

// 为父元素和子元素分别绑定冒泡阶段的事件constparent=document.getElementById('parent');constchild=document.getElementById('child');parent.addEventListener('click',()=>{console.log('父元素冒泡阶段触发');});// 第三个参数默认为false，表示在冒泡阶段触发child.addEventListener('click',()=>{console.log('子元素冒泡阶段触发');});

点击子元素时

子元素冒泡阶段触发 父元素冒泡阶段触发

四、阻止冒泡

在某些场景下，我们不希望事件向上冒泡，避免触发父元素的事件处理函数。这时可以使用 event.stopPropagation() 方法来阻止事件继续传播。

child.addEventListener('click',(event)=>{console.log('子元素冒泡阶段触发');event.stopPropagation();// 阻止事件向上冒泡});

点击子元素时

子元素冒泡阶段触发

父元素的事件处理函数不会被触发。

⚠️ 注意：event.stopPropagation() 只会阻止事件在冒泡或捕获阶段的传播，但不会阻止事件的默认行为（如链接跳转、表单提交）。如果需要同时阻止默认行为，可以使用 event.preventDefault()。

五、解绑事件

当 DOM 元素被销毁（如单页应用路由切换、弹窗关闭）或事件不再需要时，必须及时解绑事件监听，否则会导致内存泄漏，长期运行会降低应用性能。

1. 命名函数解绑

这是最常用的方式，需要确保绑定和解绑使用的是同一个函数引用。
核心要求：绑定和解绑必须使用同一个函数引用，命名函数是实现这一要求的最优方式。

// 定义命名函数functionhandleClick(){console.log('点击事件触发');}// 绑定事件child.addEventListener('click',handleClick);// 解绑事件child.removeEventListener('click',handleClick);

2. 匿名函数无法直接解绑

如果绑定事件时使用了匿名函数，将无法直接解绑，因为无法获取到函数的引用。

// ❌ 这种方式无法解绑child.addEventListener('click',()=>{console.log('匿名函数事件');});// 无法移除，因为匿名函数没有引用child.removeEventListener('click',()=>{});

3. 事件委托中的解绑

在使用事件委托时，通常只需要在父元素上解绑一次即可，不需要遍历所有子元素，这也是事件委托的性能优势之一。

总结

• 事件流：包含捕获、目标、冒泡三个阶段，决定了事件的传播顺序。
• 事件捕获：从 document 向下到目标元素。
• 事件冒泡：从目标元素向上到 document，是默认行为。
• 阻止冒泡：使用 event.stopPropagation() 避免事件向上传播。
• 解绑事件：必须使用命名函数，确保引用一致，避免内存泄漏。
• 掌握事件流的原理，能够让你在处理复杂交互时更加游刃有余，写出更高效、更可控的前端代码。