北京学区房
呵呵，这词儿可真有意思。
你第一次听到它，脑子里冒出来的是什么？是不是一锅正在烧开的水，咕嘟咕嘟，水底受热，一个个透明的小气泡挣扎着、摇晃着，拼命向上冲，直到“噗”地一下在水面破开，化作一缕蒸汽？或者，是夏日午后，用吸管对着一杯肥皂水吹气，吹出一个又一个五彩斑斓、颤颤巍巍的泡泡，它们挤在一起，向上升腾，最终飘向空中？
没错，这就是 bubbling 最原始、最直观的画面。这个词的灵魂，就在于那个“从下至上”、“从内到外”的涌动过程。
但凡你稍微接触点前端代码，或者在某些技术论坛里潜过水，你就会发现，bubbling 这个词，几乎是前端开发者绕不开的一个坎，一个概念，甚至是一种哲学。在那个由一行行代码构筑的虚拟世界里，bubbling，或者我们更常叫它的中文名——事件冒泡，扮演着一个至关重要的角色。
想象一下网页是一个巨大的、多层的俄罗斯套娃。最里面那个最小的娃娃，是你刚刚点击的一个按钮。你以为你只是精准地点了那个按钮？天真了，朋友。在代码的逻辑里，你这一“点”，就像往平静的湖里扔了颗石子。
首先，那个最小的娃娃，也就是那个按钮本身，感觉到了这次点击。它“啊”地叫了一声。然后，这个“点击事件”并没有就此打住，它像一个不甘寂寞的幽灵，开始向上飘。它飘到了包裹着按钮的那一层娃娃（比如一个<div>容器），那一层也感觉到了：“嘿，我里面的小老弟被点了！”。然后，这个事件继续向上飘，飘到更大一层的娃娃（比如<body>标签），再到最外层的那个巨无霸娃娃（<html>乃至整个文档document）。
这一连串的‘连锁反应’，这个从最具体的点击目标（the target）开始，一层一层向上传递，直到最顶层根节点的过程，就是前端世界里大名鼎鼎的事件冒泡（Event Bubbling）。
它就像一滴墨水滴入清水，从一个点开始，向整个容器扩散。
为什么要有这么个看起来多此一举的设计？懒，或者说，高效。
这就是著名的“事件委托”（Event Delegation）机制的核心。比如说，你有一个列表，里面有一百个条目，每个条目你都想让它能被点击。你是给这一百个条目每一个都单独绑上一个“监听器”呢？还是干脆就在它们共同的“老祖宗”（那个包裹着所有条目的父容器）身上绑一个监听器，然后等着下面任何一个“子孙”被点击时，让这个事件冒泡上来，再由这个“老祖宗”统一处理？
答案显而易见。后者显然更省事，性能也更好。这就像一个公司的CEO，他不需要知道每个员工在干嘛，他只需要在部门总监（父容器）那里听汇报就行了。下面任何一个员工（子元素）搞出点动静，这个动静会一层层冒泡到总监那里，总监再统一报告给CEO。
当然，有冒泡，就有个跟它对着干的兄弟，叫‘捕获’（Capturing）。一个从里往外冒，一个从外往里钻。像不像两个侦探，一个从案发现场（你点击的元素）往外查，一个从大门口（window对象）往里搜？大部分时候，我们打交道的都是这个更符合直觉的“冒泡”阶段。
有时候，这泡泡冒得也挺烦人。你明明只想让这个按钮自己“响”一下，别去打扰楼上的各位大佬（父元素）！这时候，event.stopPropagation()就闪亮登场了。它就像一个盖子，“啪”一下盖住，泡泡冒到这儿，就此打住，世界清静了。
但你以为 bubbling 就只存在于冷冰冰的代码里吗？
那就太小看这个词的生命力了。
Bubbling 几乎是一种宇宙间的普遍模式，一种信息传递和社会现象的隐喻。
想想看，办公室里的八卦。是不是总从某个角落的茶水间，由两个人的窃窃私语开始？这个小小的“事件”开始冒泡。它先是在小部门里流传，然后跨部门传播，最终可能冒到老板甚至CEO的耳朵里。每一个听到并传播的人，都是事件冒泡路径上的一个“父节点”。
社交媒体上的一个热搜话题，更是 bubbling 的绝佳范例。
可能最开始，只是某个小众圈子里的一个帖子，一张图，一段视频。这，就是那个被点击的“按钮”。然后，被圈子里的人转发、评论，事件开始在小范围内冒泡。接着，某个大V或者营销号注意到了，随手一转，相当于把这个事件“冒”到了一个更大的父容器里。于是，指数级的传播开始了。事件的泡泡越冒越大，越升越高，最终突破了圈层，出现在所有人的时间线上，在微博热搜榜首“引爆”。
这个从“圈地自萌”到“人尽皆知”的过程，不就是一次壮观无比的社会性bubbling吗？我们常说的“出圈”，其本质就是信息和影响力的冒泡。
甚至，连我们自己的情绪，也是一种 bubbling。
你今天早上被洒了一身咖啡，这是个很小的负面事件（target element）。你没发作，但这个不爽的情绪开始在你心里冒泡。到了公司，老板一句无心的批评，成了第一个父节点，这个泡泡变得更大了。路上堵车，这个泡泡又升了一层。回到家，看到乱糟糟的房间，这个泡泡终于冒到了顶，在你的理智“水面”上，“砰”地一声炸裂开来，你可能就为了一件鸡毛蒜皮的小事大发雷霆。
你看，bubbling无处不在。
它是一种底层的、向上的、扩散的冲动。它解释了事物之间是如何相互关联，相互影响的。这世界，哪有什么真正独立存在的东西？你以为你只是在代码里阻止了一次事件传递，其实你是在截断一种联系；你以为你只是发了条朋友圈，其实你也在向整个社交网络投下了一颗小石子，它的涟漪，就是一种bubbling。
所以，下次再有人问你“bubbling是什么意思”，你大可以不必急着给他讲DOM树和事件监听器。
你可以让他看看沸腾的水，看看升空的肥皂泡，看看正在发酵的舆论，再看看我们自己内心那翻腾不休的思绪。
Bubbling，它是一种力量，一种过程，一种无声却又汹涌的连接。
它，就是生活本身。
相关问答