addEventListener的第三个参数

如何查看页面绑定的事件

上述截图所示, window的keydown事件绑定了两个回调函数, 且都是对按键ESC的处理。

popup-manager.js(addEventListener)是引用的第三方组件绑定的, 点击esc按钮后页面空白, 为了解决该问题, 我给keydown事件添加了新的回调函数, 在新的回调函数内部使用e.stopPropagation(), 意图阻止popup-manager.js(addEventListener)回调函数执行;开始的时候阻止操作没有生效, 没有生效的原因是我没有设置useCapture为ture。

addEventListener的第三个参数

  1. addEventListener的第三个参数可以不定义

  2. addEventListener的第三个参数可以是一个对象

  3. addEventListener的第三个参数可以是useCapture

    addEventListener方法的第三个参数是一个布尔值,用于指定事件是在捕获阶段还是冒泡阶段触发。如果useCapture为true,则事件在捕获阶段触发;如果useCapture为false(默认值),则事件在冒泡阶段触发。

DOM事件的传播过程

在DOM事件中,事件的传播过程分为三个阶段:捕获阶段、目标阶段和冒泡阶段。

捕获阶段:事件从最外层的祖先元素开始向下传播,直到达到目标元素。

目标阶段:事件到达目标元素。

冒泡阶段:事件从目标元素开始向上冒泡,直到达到最外层的祖先元素。

DOM事件的传播顺序

捕获阶段先于冒泡阶段执行。在捕获阶段,事件从window对象开始向下传播,然后到达目标元素。然后在冒泡阶段,事件从目标元素开始向上冒泡到window对象。

所以window的keydown绑定的两个回调函数,useCapture为true的先执行。

如果window对象绑定了两次keydown事件,并且都没有设置useCapture参数,默认情况下这两个事件会在冒泡阶段触发。

根据DOM事件传播的规则,事件会从目标元素开始向上冒泡到window对象。在冒泡阶段,先绑定的事件会先触发,后绑定的事件会在它之后触发。

因此,先绑定的keydown事件会先触发,后绑定的keydown事件会在它之后触发。

在上面截图popup-manager.js(addEventListener)是在reportView.js(addEventListener)之前绑定的, 所以popup-manager.js(addEventListener)的回调函数会先执行, 所以reportView.js(addEventListener)没有设置useCapture为true的时候, 没能阻止popup-manager.js(addEventListener)回调函数的执行。

e.stopPropagation

e.stopPropagation()是一个用于阻止事件继续传播的方法。

相关推荐
IT_陈寒9 分钟前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts