JS里控制事件在捕获与冒泡阶段的触发

最新推荐文章于 2024-04-17 11:31:34 发布
最新推荐文章于 2024-04-17 11:31:34 发布
阅读量768 收藏 4
点赞数 4
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kodopy/article/details/110443786
版权
本文探讨了JavaScript中事件传播的三个阶段：捕获、目标执行和冒泡。通过实例解释了事件如何沿着DOM树向下捕获并在目标元素上执行，最后向上冒泡。特别指出，默认情况下事件在冒泡阶段触发，并展示了如何在捕获阶段绑定事件的示例。
摘要由CSDN通过智能技术生成

JS中的事件创建后，会按照如下过程在HTML元素间进行传播。

  • 第一阶段：事件捕获，事件对对象沿DOM树向下传播
  • 第二阶段：目标出发，运行事件监听函数
  • 第三阶段：事件冒泡，事件沿DOM树向上传播

在这里插入图片描述

黑线表示的是事件的捕获阶段，捕获阶段捕获到三个click方法，红线表示的是事件的冒泡阶段，事件默认都是在冒泡阶段触发，所以三个click事件依次触发。
在这里插入图片描述

		var btn1 = document.getElementById("btn1");
        btn1.
最低0.47元/天 解锁文章
kodopy
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js基础之事件捕获与冒泡原理
10-16
当事件在这样的结构中触发时，就会出现事件传播的过程，即事件捕获和事件冒泡。事件捕获是从最外层的父元素开始，向子元素传递事件的过程，而事件冒泡则相反，是从事件触发的最内层子元素开始，向父元素方向传递。 ...
事件冒泡与事件捕获
没有感情的代码机器的博客
06-22 192
事件冒泡与事件捕获是JS学习中必须掌握的。下面是有关事件冒泡与事件捕获的概念。 什么是事件冒泡？ IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。譬如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
控制事件触发的时机问题
谦进
07-06 794
假设图片列表中，都有一个放上去显示图片详情的事件，而且图片的详情是ajax动态加载过来的，如果事件都是在一开始就被触发，那么会造成堵塞，而且页面会很卡。
让事件在捕获阶段执行
longtengg1的博客
04-15 998
让事件在捕获阶段执行，而不在冒泡阶段执行的使用场景
JS-关于事件的触发机制（冒泡与捕获）
CSDNLFF的博客
01-09 1286
一、事件的默认触发机制？ 默认冒泡触发：事件触发时，先触发子元素，再依次向上触发父元素。 二、如何阻止事件冒泡？ e.stopPropagation() 三、事件委托实现的方式？ 通过父元素绑定事件，在子元素上触发后将事件冒泡到父元素。 四、事件触发的三个阶段？ element.addEventListener( '事件名', 处理函数, 事件处理机制[boolean(false默认：在冒泡阶段触发，true:在捕获...
JavaScript事件的捕获阶段（Capture phase）
12-12 662
最近项目中遇到一个实际问题，自己搞了半天没解决，最后在StackOverflow上求助，不到3分钟就得到了解决方案，而且答案意外的很简单——加一个参数。 场景是这样的：有一个表格（事实上这样的表格在这个系统很多），每一行（row）是顾客的信息（名字，订单号，付款金额...），要求点击表格行（tr元素）打开订单详情，点击顾客名字（包裹在一个a元素里，a在td里）时打开顾客信息页面，不打开...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
在JavaScript中，当你给一个元素添加事件监听器时，默认的行为是事件在冒泡阶段被触发。这意味着如果你同时在父元素和子元素上设置了相同类型的事件处理函数，当子元素的事件被触发时，首先执行的是子元素的函数，...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
js事件机制----捕获与冒泡机制实例分析
10-15
在JavaScript中，事件的传播分为两个阶段：捕获阶段和冒泡阶段。 **捕获阶段**（Capture Phase）：当事件发生时，浏览器会从最外层的DOM节点（如`document`）开始，沿着DOM树向下传递事件，直到到达事件实际发生的...
了解事件捕获, 事件冒泡, 事件流和事件委托
hmxs_hmbb的博客
04-23 410
事件流 当一个事件触发的时候, 浏览器会自动生成一个event事件对象并且执行三个阶段; (1)事件捕获 (2)事件目标 (3)事件冒泡 事件捕获 事件触发, 浏览器会最先执行事件捕获; 捕获事件的来源, 浏览器会一层一层的去找; 知道找到事件源为止 事件目标 当事件捕获阶段结束的时候, 就会进入下一个阶段也就是事件目标. 这一个阶段浏览器就会执行其事件处理函数里面的代码 事件冒泡 事件处理函数完毕之后, 会进入事件冒泡阶段; 它找寻目标标准正好和事件捕获相反. 它所要..
js中的事件机制
08-09 1310
1.事件绑定的集中方式： 1.1通过在html标签中加入onclick,onblur等。 <div id="outestA" onclick="var id = this.id;alert(id);return false;"></div> 但是这种不做不值得提倡。 1.2在onclick中指定函数名：<script> function buttonH
详细介绍JS中的事件机制：捕获、目标、冒泡
qq_44621394的博客
03-03 2847
详细介绍JS中的事件机制：捕获、目标、冒泡
彻底弄懂JS事件委托的概念和作用
weixin_30338481的博客
08-18 293
一、写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗？然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面才知道,原来他要考察的是事件委托(代理)的原理,他指的是未来还不清楚会创建多少个节点,所以没办法实现给他们注册事件。 二、事件委托(事件代理)的作用? 为了方便理解,我先把事件委托的作用写一下。...
事件捕捉，事件冒泡，事件代理，阻止事件冒泡，阻止默认事件
weixin_44580139的博客
08-03 942
文章目录1. 事件冒泡与事件捕获事件冒泡事件捕获2. DOM2事件模型3. addEventListener 的第三个参数4. 事件代理5. 阻止事件冒泡1. 给子级加event.stopPropagation()2.在事件处理函数中返回 false3. event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡5. 阻止默认事件 1. 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
Dust的博客
09-25 352
事件冒泡 添加三个套在一起的div元素，在最里面放一个button，感受事件触发时从里到外“冒泡”的过程。 给每个div都加一个事件：点击时就alert test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &l
js事件（事件冒泡与事件捕获）
weixin_30381317的博客
01-22 207
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <div id='aa' click='po'> <p id='bb' click='on'>点击</p> </div> 　　上面两个点击事件如果点击的时候，到底谁会被先触发呢，为了解决这个问题微软和网景提出了两...
事件绑定、事件传播、事件捕获、事件冒泡、自定义事件
2401_84091628的博客
04-13 748
/通过new Event 创建事件dom.addEventListener(‘test’, function () { //注册事件});//触发事件自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
js 事件模型 事件捕获、事件冒泡
最新发布
weixin_54714100的博客
04-17 1221
什么是事件捕获、事件冒泡 事件冒泡（event bubbling）和事件捕获（event capturing）是指在 DOM 树中处理事件的两种不同方式。
DOM事件阶段：捕获与冒泡详解
在实际应用中，可以通过`addEventListener`方法来设置事件监听器，并通过第三个参数决定事件是在捕获阶段还是冒泡阶段触发。例如： ```javascript element.addEventListener('click', function(event) { // 事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值