JS addEventListener第三个参数 捕获与冒泡

最新推荐文章于 2023-10-26 15:50:32 发布
最新推荐文章于 2023-10-26 15:50:32 发布
阅读量339 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q610151809/article/details/119675821
版权
本文介绍了JavaScript中addEventListener方法的第三个参数，用于控制事件处理是在捕获阶段还是冒泡阶段执行。详细解释了DOM事件流的捕获和冒泡过程，并通过代码实例展示了如何改变事件处理顺序。最后讨论了阻止事件传播的方法。
摘要由CSDN通过智能技术生成

JS addEventListener第三个参数 捕获与冒泡

element.addEventListener(event, function, useCapture) 方法可传入三个参数。

  1. event: 时间名称，如 ’click‘，’scroll‘ 等

  2. function：触发事件时的执行函数

  3. useCapture：可选项。传入布尔值，表示事件是否在捕获阶段执行，true为捕获阶段执行，false（默认值）为冒泡阶段执行。

DOM事件流

img

事件捕获与冒泡

在这里插入图片描述

事件捕获（Event Capturing）：指的是从启动元素的节点开始，逐层向下传递，直到最下层节点。

事件冒泡（Event Bubbling）：在事件捕获后，从最下层节点向上以此传递，与事件捕获相反。

代码实例
最低0.47元/天 解锁文章
Be_Myse1f
关注
JavaScript中捕获与冒泡详解及实例
10-20
在实际应用中，如果要使用事件捕获，可以通过`addEventListener`函数的第三个参数设置为`true`，来指定事件监听器处于捕获阶段。 下面是一个简单的事件捕获示例： ```javascript document.getElementById("first")...
js中监听事件addEventListener第三个参数的理解（事件的冒泡与捕获）
艾欢欢的博客
03-20 4228
js中，可以给一个dom对象添加监听事件，像下面这样： domElement.addEventListener("click", function(){}, true); 第一个参数是事件类型，比如点击(click)、双击(dbclick) 第二个参数就是函数，触发事件后，需要执行的函数。 而第三个参数就是事件的捕获与冒泡， 为true时捕获，false时冒泡。 三个参数介绍完了，那么第三个...
addEventListener()的第三个参数
热门推荐
你若盛开，清风自来
03-31 1万+
在JS中，我们可以给一个dom对象添加监听事件 DOM事件流 当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段： 捕获阶段：事件从window对象自上而下向目标节点传播的阶段； 目标阶段：真正的目标节点正在处理事件的阶段； 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。 接着就来分别介绍事件捕获和事件冒泡这两种机制。 要检验事件流...
js响应事件的阶段，捕获阶段，冒泡阶段
五月西瓜的专栏
05-18 3692
当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window，然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件
addEventListener 第三个参数
阿拉斯加头头的博客
04-22 2118
addEventListener 方法的第三个参数可以是一个布尔值、一个对象，或者是省略不填。
原 js中addEventListener中第3个参数
丿灬安之若死
02-22 4411
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4"> <div id="id2" style="width:200px; height:200px; position:ab...
JavaScript事件详解
jinmu520的博客
08-25 245
想必大家对JavaScript的事件都不陌生吧，大多数在网站开发的时候都会用到，这也是JavaScript的基本功之一，本文就为各位梳理一下相关知识。 JavaScript事件模型 JavaScript事件模型，也就是事件机制，分为两类DOM0级事件模型和DOM2级事件模型。 DOM0级事件模型 DOM0级事件模型是早期的事件模型，比如说一个onclick事件 缺点： 无法绑定多个相同的事件，注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效 document.getElementById('c
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
如果第三个参数为`true`，事件将在捕获阶段执行；若为`false`（默认值），事件将在冒泡阶段执行。 阻止事件冒泡可以防止事件继续向上层元素传播。在标准的W3C浏览器中，可以使用`event.stopPropagation()`来实现这...
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
10-20
为了使用事件捕获，可以在`addEventListener`的第三个参数中传入`true`，告诉浏览器使用捕获模式而不是默认的冒泡模式。例如： ```javascript document.getElementById("first").addEventListener("click", ...
js基础之事件捕获与冒泡原理
10-16
开发者可以通过在 addEventListener 方法中设置第三个参数为 true，来指定希望使用事件捕获机制。例如： ```javascript element.addEventListener('click', function() {}, true); ``` 不过在实际开发中，由于事件...
【javaScript】addEventListener第三个参数的使用和事件冒泡和捕获机制
Umbrella_Um的博客
07-25 1107
前言 续上一章将的addEventListener和attachEvent比较的第四个不同点续讲… 事件冒泡 概念： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） 这就话怎么理解 >>> 看代码 var ...
js中addEventListener中第3个参数 .
hck341204的专栏
04-19 349
捕获阶段、目标阶段、冒泡阶段 [b]addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。[/b] [code="java"] id1 div2 [/code] [b]eg1:[/b] [code="java"]01.document.getElem...
JS面试题——addEventListener的第三个参数
m0_47807991的博客
04-25 564
JS面试题——addEventListener的第三个参数
js,addEventListener参数传递
szuaudi的博客
07-13 3773
转载自：js,addEventListener参数传递
前端笔记 js关于addEventListener
最新发布
doiido的专栏
10-26 4368
事件对象的类型取决于特定的事件。durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
js-addEventListener()第三个参数useCapture
acoolgiser的博客
11-02 729
js-addEventListener()第三个参数useCapture 概述: 　　第3个参数叫做useCapture，是一个boolean值，就是true or false 。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数 html片段 < div id
addEventListener与事件捕获、事件冒泡
TTYLXWT的博客
06-16 2566
addEventListener与事件捕获、事件冒泡： addEventListener的基本用法 项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动 态绑定的方式来处理按钮的事件。W3C为我们提供了addEventListener()函数用来为指定的 dom元素动态绑定事件。这个函数有三个参数： type:用来设置事件类型，例如click。 listener:用来设置监听事件的函数，及type类型的事件发生后执行的函数。 大部分情况下，确切的说是我们绑定事...
js中addEventListener中第3个参数
anbingmeng1565的博客
07-16 101
functiondiv [html]view plaincopy <divid="id1"style="width:200px;height:200px;position:absolute;top:100px;left:100px;background-color:blue;z-index:4"> &...
JavaScript中addEventListener使用带参数函数
hhhcbw的博客，欢迎各位来访
09-26 2403
JavaScript中addEventListener使用带参数函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值