【Web八股】深入理解浏览器DOM事件流，灵活控制它！

张开发
• 2026/4/15 9:55:46 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

【Web八股】深入理解浏览器DOM事件流，灵活控制它！
前情例子当在父容器设置了contextmenu.prevent即在右键菜单事件中设置了event.preventDefault()阻止了浏览器的默认菜单那么如何开启该父容器下 某一个子元素的 浏览器右键菜单事件呢要知道在事件控制、CSS属性设置中虽然有类似“继承”概念但子元素的优先级高于父元素的处理可覆盖学会如何灵活控制事件流则能解决上述问题⚙️深入理解事件流事件流的三个阶段这里的核心在于每个阶段都为我们提供了在不同层级捕获和处理事件的机会从而实现复杂的交互逻辑。捕获阶段 (Capture Phase):事件从最外层的window对象开始顺着 DOM 树一层层向下流动直到到达“目标元素”的上一个父元素。默认情况下普通事件处理函数不加true参数不会在这个阶段触发。目标阶段 (Target Phase):这是核心时刻。事件流流动到了用户点击的那个目标元素event.target本身。此时绑定在目标元素上的点击事件处理函数会被触发。冒泡阶段 (Bubble Phase):目标元素处理完事件后事件流开始反向运动。它沿着 DOM 树从目标元素的父元素一层层向上冒泡直到再次回到window对象。绝大多数我们编写的事件处理逻辑如点击按钮后的反应都发生在这个阶段。通俗来说我们监听函数是target.addEventListener(type, listener, useCapture);当你设置useCapture: false默认值的时候捕获阶段不处理任何事件监听函数只有当设置useCapture: true时捕获阶段会拦截处理函数不会再流入冒泡阶段·element.addEventListener(click, func, true)那么正常情况下咱们点击一个元素都是在冒泡阶段生效从子元素开始找处理器、一直到父元素但是如果你在事件监听处理函数中调用了event.stopPropagation()则会在冒泡阶段阻止事件的传播不会再继续走完传播到window顶节点的整个向上链路了也就不会再执行父元素的监听处理✅解决前情例子的提问子元素设置contextmenu.stop /event.stopPropagation()

更多文章