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

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart1 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.1 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu1 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss1 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师2 小时前
React面试题
前端·javascript·react.js
木兮xg2 小时前
react基础篇
前端·react.js·前端框架
ssshooter2 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘3 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai3 小时前
HTML HTML基础(4)
前端·html