JavaScript 事件冒泡和捕获区别

你有没有遇到过这种情况：点击网页上一个蓝色的“提交”按钮，结果连带着它外面的表单、甚至整个页面都触发了点击事件，弹出了奇怪的提示？这背后的“幕后推手”就是JavaScript里的事件传播机制，其中最容易混淆的就是事件冒泡和捕获。

先搞懂：事件传播的三个阶段

要区分冒泡和捕获，得先知道事件从触发到被处理，会走三个“步骤”。你可以把它想象成送外卖：外卖小哥要把餐送到你手里，得先从商家出发（这就是事件捕获阶段），经过小区大门、楼栋单元门、你家门口这几个关卡，最后才把餐递到你手上（目标阶段）；要是你家的门没关，或者你家的门铃连带着整层楼的门铃都响了，这就类似事件冒泡——从你家出发，顺着楼道、单元门、小区大门一路传出去。

简单说，事件的传播过程是：捕获阶段 → 目标阶段 → 冒泡阶段，而冒泡和捕获，就是这个过程中两个不同的“传播方向”。

事件捕获：从外到里的“外卖配送”

事件捕获是“先外后内”，就像外卖小哥先到小区，再到楼栋，最后敲你家门。举个生活化的例子：你在客厅装了个智能音箱（父元素），它的功能是“听到任何声音就说‘有动静’”；你在音箱旁边的茶几上放了个水杯（子元素），水杯的功能是“被碰到就说‘我被碰啦’”。

如果按事件捕获的规则，你碰了水杯，事件会先从最外层的“客厅”（其实是DOM树最顶层的节点）开始，顺着父元素（智能音箱）往下传到子元素（水杯）。结果就是：先听到“有动静”（音箱的捕获事件触发），再听到“我被碰啦”（水杯的事件触发）。

这就好比外卖小哥先到你家小区（最外层），再到你家楼下，最后敲门（目标），是从外往内的“配送顺序”。

事件冒泡：从里到外的“楼道门铃”

事件冒泡刚好反过来，是“先内后外”，就像你按了自己家门铃，整层楼的门铃都跟着响。还是刚才的例子：如果给音箱和水杯的事件都设置成冒泡模式，那你碰水杯的话，事件会先从水杯（目标元素）开始，往上传到智能音箱，再到更外层的客厅。

结果就是：先听到“我被碰啦”（水杯的冒泡事件触发），再听到“有动静”（音箱的冒泡事件触发）。

再举个更常见的网页例子：你做了一个“点击头像查看资料”的按钮，里面的头像、按钮、外面的父容器都绑定了点击事件。如果不小心没阻止冒泡，点头像的时候，头像的事件先触发，接着是按钮的，最后是父容器的——本来想查看资料，结果弹出了父容器的“回到顶部”提示，是不是很像误碰门铃的尴尬？

一句话说清核心区别

简单总结：捕获是从最外层往目标元素传，是“先外后内”；冒泡是从目标元素往最外层传，是“先内后外”。

那什么时候用捕获，什么时候用冒泡？其实不用纠结“什么时候用”，只要记住：大部分默认是冒泡，要是需要“先处理外层逻辑再处理内层”，比如做弹窗的时候，点弹窗外面要关闭弹窗，就可以用捕获先触发外层的关闭事件，或者用stopPropagation()阻止冒泡，避免内层事件干扰外层逻辑。

下次再遇到点击元素触发了一堆不想要的效果，大概率就是冒泡在“搞鬼”，搞懂这两个机制，就能轻松解决这类问题啦。