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()是一个用于阻止事件继续传播的方法。

相关推荐
余道各努力,千里自同风1 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Mike_jia1 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind2 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao2 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo2 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽2 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679182 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖2 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮2 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git