【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()++

相关推荐
可乐鸡翅yeah_9 小时前
hls.js 播放质量埋点实战,采集卡顿、起播、错误指标定位线上用户问题
开发语言·前端·javascript·ecmascript·音视频·m3u8·音视频在线播放
tedcloud12310 小时前
Wand-Enhancer:如何搭建一套远程开发与测试环境
前端·人工智能·macos·开源·流程图
掘金挖土10 小时前
前端手摸手跑路之 AI 应用开发(三)
前端·后端
计算机魔术师10 小时前
OpenAI 宣称破解千禧年难题,数学家却说是「反例搜索」?
前端
志尊宝10 小时前
Vue3 零基础每日笔记(015):条件渲染 v-if 与 v-show——控制 DOM 生死还是控制显隐
前端·vue.js·笔记
掘金者阿豪11 小时前
OceanBase 和金仓怎么选?别只看分布式,复杂查询更考验架构取舍
前端·后端·架构
Bug修理工Bubble11 小时前
Swift ARC:一个对象到底什么时候才会被释放?
前端
ClouGence11 小时前
GPT-6 做 UI 自动化测试:Demo 惊艳,但真的适合长期回归吗?
前端·chatgpt·测试
阿酷tony11 小时前
视频专栏列表的防录屏水印和跑马灯效果(也可网站调用)
java·前端·音视频
凌风的跨境分享12 小时前
Temu店群运维提效:定时策略自动化任务全场景实操指南
大数据·运维·前端·人工智能·架构·自动化