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

🌰前情例子:

当在父容器设置了 @contextmenu.prevent(即在右键菜单事件中,设置了event.preventDefault(),阻止了浏览器的默认菜单),

那么如何开启该父容器下 ,某一个子元素的 浏览器右键菜单事件呢?

要知道,在事件控制、CSS属性设置中,虽然有类似"继承"概念,但子元素的优先级高于父元素的处理,可覆盖

学会如何灵活控制事件流,则能解决上述问题

⚙️深入理解事件流:

事件流的三个阶段

这里的核心在于,每个阶段都为我们提供了在不同层级捕获和处理事件的机会,从而实现复杂的交互逻辑。

  1. 捕获阶段 (Capture Phase): 事件从最外层的 window 对象开始,顺着 DOM 树一层层向下流动,直到到达"目标元素"的上一个父元素。默认情况下,普通事件处理函数(不加 true**参数) 不会 在这个阶段触发
  2. 目标阶段 (Target Phase): 这是核心时刻。事件流流动到了用户点击的那个目标元素event.target)本身。此时,绑定在目标元素上的点击事件处理函数会被触发
  3. 冒泡阶段 (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()++

相关推荐
程序员鱼皮4 分钟前
我花 300 块,让 Claude Fable 5 开发桌面 APP,值么?
前端
William_Xu10 分钟前
JavaScript 并发控制
前端
拾年27510 分钟前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
光影少年11 分钟前
懒加载与分包:React.lazy + Suspense
前端·react.js·掘金·金石计划
小林ixn26 分钟前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
namexingyun1 小时前
开源前端生态如何成为 AI UI 生成的“燃料“:shadcn/ui、Tailwind CSS、Storybook 技术价值全解剖
java·前端·人工智能·python·ui·开源·ai编程
Zyed1 小时前
[STM32]Day15读写FLASH+读取ID
前端·stm32·性能优化
jvxiao2 小时前
你真的懂作用域吗?从编译原理角度深度 JS 的作用域
前端·javascript
Darling噜啦啦2 小时前
二叉树与递归算法实战:从树结构到 LeetCode 爬楼梯,一文吃透前端数据结构与递归思维
前端·javascript·数据结构
星栈2 小时前
Rust + Makepad 应用怎么打包发布:Windows、macOS、Linux 全平台交付
前端·rust