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

相关推荐
Rrvive24 分钟前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾24 分钟前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api
極光未晚26 分钟前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆27 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
uu_code00731 分钟前
Android接入Pixelfree美颜SDK技术指南
前端
小鱼小鱼干32 分钟前
使用 ESLint 实现 Git Commit 前的语法检查
前端
用户92724725021932 分钟前
PHP + CSS + JS 数据采集与展示系统
javascript
码哥DFS1 小时前
Flex布局原理
前端·css·css3
小样还想跑1 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者1 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端