JavaScript事件机制：从冒泡捕获到React事件系统 🎪前言大家好！今天我们来聊聊JavaScript中的事

前言

大家好！今天我们来聊聊JavaScript中的事件机制——这个让我们的网页"活"起来的神奇系统。就像马戏团的表演🎪，事件在DOM树中穿梭，有严格的表演顺序，而我们要做的就是当好这个马戏团的导演！

一、DOM事件模型：事件的三阶段旅行 ✈️

JavaScript事件处理经历了三个阶段：

捕获阶段：事件从window对象一路向下"捕获"到目标元素（像潜水员下潜🌊）
目标阶段：事件到达实际触发它的元素（到达海底宝藏💎）
冒泡阶段：事件从目标元素向上"冒泡"回window对象（像气泡上浮🌬️）

<div id="parent">
    <div id="child"></div>
</div>

<script>
    // 默认情况下（useCapture为false），事件处理程序在冒泡阶段触发
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent clicked - 冒泡阶段');
    });
    
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child clicked - 目标阶段');
    });
    
    // 如果设置为true，则在捕获阶段触发
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent clicked - 捕获阶段');
    }, true);
</script>

当你点击child子元素时，控制台会输出：

parent clicked - 捕获阶段
child clicked - 目标阶段
parent clicked - 冒泡阶段

二、事件委托：聪明的偷懒技巧 🧠

在下面的代码中，我们看到了一个经典案例——事件委托。为什么要用事件委托？让我用马戏团来比喻：

想象你是一个马戏团团长🎪，有100个演员（li元素）。如果给每个演员单独配一个经理（事件监听器），成本太高了！聪明的做法是只给整个马戏团（ul元素）配一个经理，让他根据演员ID来管理所有人。

<!-- 事件委托示例 -->
<ul id="myList">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

<script>
    // 传统方式：给每个li添加监听器（不推荐）
    // const lis = document.querySelectorAll('#myList li');
    // lis.forEach(li => {
    //     li.addEventListener('click', function(e) {
    //         console.log(e.target.innerText);
    //     });
    // });
    
    // 事件委托：只需一个监听器在父元素上
    document.getElementById('myList').addEventListener('click', function(e) {
        // e.target是被点击的实际元素
        if(e.target.tagName === 'LI') {
            console.log(e.target.innerText);
        }
    });
</script>

优点：

🚀 性能更高：减少内存使用
�‍ 动态元素友好：新增的子元素自动拥有事件处理
🏗️ 代码更简洁：不需要循环绑定

三、DOM事件级别：从石器时代到工业革命 ⏳

1. DOM0级事件：简单粗暴

DOM0事件：最早的浏览器实现，通过HTML属性（如onclick="..."）或JS属性（如element.onclick=function）直接绑定事件，简单但不支持多监听器。

<button onclick="console.log('Clicked!')">点击我</button>

或

button.onclick = function() { console.log('Clicked!'); };

缺点：一个事件类型只能绑定一个处理函数（像独裁者👑）

2. DOM2级事件：民主制度

DOM2事件：标准化事件模型，使用addEventListener绑定事件，支持多个监听器、事件捕获和冒泡阶段，是现在的主流方式。

button.addEventListener('click', function() { console.log('第一个处理函数'); });
button.addEventListener('click', function() { console.log('第二个处理函数'); });

优点：可以添加多个监听器，可以控制捕获/冒泡阶段

大家要记住没有DOM1事件哟！！

四、React事件系统：虚拟的魔法帽 🎩

React没有使用原生DOM事件，而是实现了自己的合成事件(SyntheticEvent) 系统：

事件委托：React把所有事件委托到document（v17后改为root容器）上
性能优化：通过事件池复用事件对象
跨浏览器：提供一致的事件接口

function handleClick(e) {
    // e是合成事件，不是原生事件
    e.preventDefault(); // 阻止默认行为
    console.log('Clicked!');
}

<button onClick={handleClick}>点击我</button>

五、高频面试题与答案 💼

Q1: 解释事件冒泡和事件捕获的区别？

答案：

冒泡：从目标元素向外层传播（像气泡上浮）
捕获：从外层向目标元素传播（像渔网下沉）
可以通过addEventListener的第三个参数控制（true为捕获，false为冒泡）

Q2: 什么是事件委托？有什么优点？

答案：
事件委托是利用事件冒泡，将子元素的事件处理委托给父元素。优点：

减少内存消耗（不需要为每个子元素绑定监听器）
动态添加的子元素自动拥有事件处理
代码更简洁

Q3: event.target和event.currentTarget有什么区别？

答案：

event.target：触发事件的原始元素（"罪魁祸首"）
event.currentTarget：当前正在处理事件的元素（等于this）

Q4: 如何阻止事件冒泡和默认行为？

答案：

event.stopPropagation()：阻止事件继续传播
event.stopImmediatePropagation()：阻止事件传播并阻止同元素上其他监听器执行
event.preventDefault()：阻止默认行为（如表单提交）

Q5: React合成事件与原生事件有什么区别？

答案：

命名：原生事件全小写(onclick)，React是小驼峰(onClick)
事件处理：React是合成事件，是原生事件的跨浏览器包装器
事件绑定：React自动在根元素委托事件，而不是直接绑定到元素

六、总结：事件机制的魔法世界 ✨

理解了这套机制，你就能：

🧙 更高效地处理事件（使用委托）
🛡️ 避免内存泄漏（合理移除监听器）
⚡ 编写性能更好的代码

希望这篇博客让你对JavaScript事件机制有了更深的理解！下次当你点击页面时，不妨想象一下事件正在DOM树中进行一场精彩的巡回演出~ 🎭