事件捕获和事件冒泡（如何改变监听事件触发的时机）

最新推荐文章于 2023-03-25 15:29:27 发布
最新推荐文章于 2023-03-25 15:29:27 发布
阅读量1.7k 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoy_gong/article/details/81235520
版权 
<html>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
        <script>
            document.getElementsByClassName("container")[0].addEventListener("click", function () { alert("container") }, true);
            document.getElementsByClassName("box")[0].stopPropagation();
        </script>
    </body>
</html>

场景：当点击box元素的时候，还是会触发alert("container")事件。

先来理解弄清楚2个名词，”事件捕获“ 和 “事件冒泡”，如下：

事件捕获：window -> document -> html -> body -> 父元素 -> 目标元素

事件冒泡：目标元素 -> 父元素 -> body -> html -> document -> window

stopPropagation()阻止事件冒泡，但是我们在addEventListener()事件监听的时候，增加了第三个参数true，该参数会改变监听事件触发的时机，由冒泡触发改为捕获触发；

所以，当我们点击box元素的时候，事件往目标元素开始捕获，当遇到container元素的时候，就触发了监听事件，从而alert。

总结：addEventListener()第三个参数可以改变事件触发的时机。

挖煤小子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中事件冒泡和事件捕获介绍
11-27
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
事件冒泡、事件捕获与事件监听
Listner的博客
02-03 624
事件冒泡与事件捕获 页面和互动是通过事件来完成的， 事件捕获是指从document一直到触发事件的节点 事件冒泡则是从触发事件的事件源一直向上到document(好比气泡一直往水面冒，事件往父级元素方向冒)[^冒泡的只是事件，并不事件绑定的处理函数。]不管是父级以上元素是否绑定了事件，冒泡都是存在的,只有人为手动的添加代码去阻止。 **阻止事件冒泡的方法：**在执行函数中添加代码event.st...
DOM事件捕获与冒泡和事件监听
baidu_31134013的博客
09-05 537
&lt;script type="text/javascript"&gt; var div=document.getElementById("myDiv"); div.addEventListener("click",function(event){ alert("div"); },true); ...
事件切换和事件冒泡
bwf_erg的博客
01-03 261
一、事件切换 1.hover()：模拟光标移到元素上触发的事件  hover(enter,leave); 当光标移动到元素上时，会触发指定的第1个函数(enter) 当光标移出这个元素时，会触发指定的第2个函数(leave) 2.toggle()：模拟鼠标连续单击触发的事件 toggle(fnl, fn2, ...fnN) 第1次单击元素，触发指定的第1个函数(fn1) 当再次单击
Js之事件 事件对象 事件委托 事件流 事件冒泡 绑定事件的方法
WyHHZKA的博客
12-26 518
Js之事件 事件对象 事件委托 事件流 事件冒泡 绑定事件的方法
实现先冒泡后捕获
EEstefan的博客
11-14 1677
事件委托 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。 事件先冒
js之事件冒泡和事件捕获详细介绍
01-19
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 （3）DOM事件流：同时支持两种事件模型：捕获型事件
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
js事件监听机制(事件捕获)总结
12-04
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，...
JS html事件冒泡和事件捕获操作示例
10-17
主要介绍了JS html事件冒泡和事件捕获操作,结合完整实例形式分析了javascript事件冒泡及事件捕获相关原理与实现方法,需要的朋友可以参考下
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
09-03
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
js阻止事件冒泡，事件穿透
远方
04-16 669
$('#id').on('click', function(event){ if (event && event.stopPropagation){ event.stopPropagation(); } else { window.event.cancelBubble = true; } });
事件：事件流、事件对象、事件委托、如何先冒泡后捕获
mkbird的博客
05-03 380
文章目录事件事件流事件对象事件委托（代理、委派） 事件 事件流 事件流描述的是页面接收事件的顺序（比如点击） 可以理解为向水底扔了石头，石头向下为捕获阶段，向上冒泡为冒泡阶段，同理鼠标点击后DOM先向下捕获这次点击事前，捕获后再向上冒泡，中间经过的对应事件处理函数都会被触发 实际开发过程都用冒泡，即没有参数 有些事件没有冒泡，如onblur，onfocus，onmouseenter，onmouseleave 事件冒泡有时会带来麻烦，比如给son和father添加点击事件，点击son，会先弹出son，再弹
js 事件冒泡 事件委托 事件穿透 事件捕获 以及如何阻止事件冒泡 阻止事件的默认行为 event.stopPropagation() event.preventDefault()，return f
sally18的博客
05-30 1625
1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false ； ...
前端系列第2集-如何让事件先冒泡后获取?
程序员哆啦A梦，蓝胖子
03-25 225
事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，直到传播到文档对象，并且可以被其他元素捕获。默认情况下，事件是先捕获后冒泡。如果希望事件先冒泡后获取，可以使用以下两种方法之一：使用事件委托（Event Delegation）事件委托是一种通过在其父元素上监听事件并利用事件冒泡来处理其子元素上的事件的技术。例如，如果有一个包含多个按钮的列表，并且希望在单击每个按钮时执行相同的操...
如何让事件先冒泡后捕获
Sugarman0620的博客
09-18 2268
在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一事件，监听捕获和冒泡，分别对应响应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。 转载于:https://www.cnblogs.com/psxiao/p/11540263.html...
js阻止事件传播/穿透（冒泡和捕获）
w_____w_____的博客
11-18 8172
阻止事件传播 //代码1 //在下面的代码中，我需要添加一个全局事件，但是改全局事件不能包括imitationSelect， imitationSelect.onclick= function(){ if(selectUl.style.display=="block"){ selectUl.style.display='none'; }else{ selectUl.style.display='block'; }
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8414
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
js冒泡事件和捕获事件
最新发布
08-11
JavaScript中的事件模型包括冒泡事件和捕获事件。这两个事件是指在页面中嵌套的元素中触发事件时，事件传播的方式。 冒泡事件是指当一个特定元素上的事件被触发时，该事件会先被触发在最内层的元素上，然后逐级向外传播，直到触发在最外层的元素上。换句话说，事件会从最具体的元素开始向最不具体的元素传播。 捕获事件是指当一个特定元素上的事件被触发时，该事件会先被触发在最外层的元素上，然后逐级向内传播，直到触发在最内层的元素上。与冒泡事件不同，捕获事件从最不具体的元素开始向最具体的元素传播。 在JavaScript中，可以使用addEventListener方法来注册事件监听器，并指定事件是否在捕获或冒泡阶段进行处理。例如： ```javascript element.addEventListener('click', myFunction, true); // 在捕获阶段处理 element.addEventListener('click', myFunction, false); // 在冒泡阶段处理（默认） ``` 需要注意的是，默认情况下，addEventListener方法注册的事件监听器是在冒泡阶段进行处理。如果想要在捕获阶段进行处理，需要将第三个参数设置为true。 希望以上解答能够帮助到你！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值