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

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css