开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

事件传播和冒泡

是指在前端开发中，当一个元素上发生了某个事件（比如点击事件），这个事件会从触发元素开始向上层元素逐级传播，直到达到文档根节点。这个传播过程分为两个阶段：捕获阶段和冒泡阶段。

在捕获阶段，事件会从文档根节点开始，逐级向下传播，直到达到触发事件的元素。在这个阶段，事件会依次经过每个祖先元素，但不会触发任何事件处理函数。

在冒泡阶段，事件会从触发事件的元素开始，逐级向上传播，直到达到文档根节点。在这个阶段，事件会依次经过每个祖先元素，并且会触发相应的事件处理函数。

事件传播和冒泡机制的优势在于可以方便地实现事件委托和事件代理。通过将事件处理函数绑定在祖先元素上，可以减少事件处理函数的数量，提高性能和代码的可维护性。同时，事件传播和冒泡机制也可以实现事件的多层处理，使得不同层级的元素都能对同一个事件做出响应。

事件传播和冒泡机制在各类前端开发中都有广泛的应用场景，比如页面交互、表单验证、动态元素绑定等。在腾讯云的产品中，可以使用云函数 SCF（Serverless Cloud Function）来实现事件传播和冒泡机制。云函数 SCF 是一种无服务器的事件驱动计算服务，可以根据事件触发自动运行代码，实现事件的传播和冒泡。

更多关于腾讯云云函数 SCF 的信息，请参考腾讯云官方文档：云函数 SCF

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

事件冒泡和传播

举栗子事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡事件传播和事件冒泡这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候...，ie使用事件冒泡。...（两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window DOM为一个完整的树使用事件传播输出hello...否则为事件传播冒泡为上，事件传播为下，事件传播优于事件冒泡 [15.gif] 可以明确的知道，此时为false为冒泡，即全部向上传播，这个比较简单不在阐述阻止进一步冒泡 // 获取元素 var div1...，为向下，且传播优先于冒泡并且事件先进行向上传，直到遇到设置为冒泡的元素的时候，停止向上传，开始进行从上到下的捕获，先最外层捕获，然后逐层捕获，直到完成。

8516 0

前端学习(51)~事件的传播和事件冒泡

DOM事件流事件传播的三个阶段是：事件捕获、事件冒泡和目标。事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。...事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。...事件冒泡事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。...这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。...说明 onclick 事件是可以冒泡的 } 阻止冒泡大部分情况下，冒泡都是有益的。当然，如果你想阻止冒泡，也是可以的。可以按下面的方法阻止冒泡。

9142 0

Event（事件）的传播与冒泡

特性说明和原理图：标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获，而IE8-浏览器只支持冒泡标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播，而ie8...Ie8-用attachEvent为dom元素添加一个事件，但必须在事件名前加上on，此类事件只能在元素的冒泡阶段。...stopPropagatin()方法用于阻止事件的传播，如果设置在捕获阶段，则目标和冒泡阶段不会被执行； cancelBubble属性只能阻止冒泡阶段，对捕获和目标阶段的事件不能阻止 preventDefault...()和window.event.returnValue用于标准浏览器和ie9+，都可以阻止默认事件。...阻止默认事件只用于验证应用场景捕获阶段的事件应用场景较少，一般情况下都应用在目标和冒泡阶段。

1.1K9 0

深入理解JavaScript中的事件传播机制：事件冒泡和事件捕获

前言在JavaScript中，事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时，它会从最内层的元素开始，然后逐级向外传播，直到最外层的元素。...这是因为事件从文档的最外层开始向内传播，然后经过外部div、内部div和按钮，直到它到达按钮。事件冒泡和事件捕获的区别事件冒泡和事件捕获的主要区别在于它们的传播方向。...如何使用事件冒泡和事件捕获在JavaScript中，你可以使用addEventListener()方法来注册事件处理程序，并指定事件传播方式。...该方法接受三个参数：事件类型、事件处理程序和一个可选的布尔值，用于指定事件传播方式。如果该值为true，则事件使用事件捕获传播方式；如果该值为false或未指定，则事件使用事件冒泡传播方式。...这是因为事件从文档的最外层开始向内传播，然后经过外部div、内部div和按钮，直到它到达按钮。结论在JavaScript中，事件冒泡和事件捕获是两种不同的事件传播方式。

5312 1

js 事件冒泡和事件捕获

事件冒泡：事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。如下，点击obj3，依次弹出obj3、world、hello。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...事件捕获：事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。...ps：IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。

3.1K3 0

事件流、事件捕获和事件冒泡的介绍

事件流、事件捕获和事件冒泡的介绍最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。...事件流分为三个阶段： 1、事件捕获阶段事件从window发出，不断向子元素寻找对应的目标节点 2、事件目标阶段事件找到了对应的目标节点，即此时再往下已经没有对应的节点 3、事件冒泡阶段事件从节点位置网上回溯到文档的根节点...我们在使用给dom添加事件时一般使用addEventListener方法，该方法传入三个参数 1、对应的事件名称如：click 2、函数：触发对应的交互响应后执行的函数 3、userCapture：指定事件是在捕获还是冒泡阶段执行...:26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body...事件冒泡可以看到，都是先触发捕获再触发冒泡事件，先从body（上）到btn（下），再从btn（下）到body（上）。

1.3K0 0

JS的事件冒泡和捕获

事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往window传播，遇到注册的冒泡事件会触发事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...和outer上面，而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...于是，document和outer的点击处理函数被执行继续向下寻找，直到到达inner元素本身，捕获阶段就此结束。...此时进入冒泡阶段，inner上的时间处理器得到执行事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。

2.5K2 0

FLEXFLASH-冒泡事件与非冒泡事件

刷新页面点击“外部BTN” 结果如图所示因为事件的引发者没有在panl1中所以不会再触发panel1的事件了以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5....如果要在事件冒泡阶段捕捉事件创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为...是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件，又要捕捉冒泡事件那么创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数...);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听这样设置之后，事件先从外部执行到内部

8701 0

事件冒泡，阻止事件冒泡 e.stopPropagation()

阻止冒泡 <script src="script...(e) { alert("我是div"); }) //e.stopPropagation();就是阻止冒泡...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用事件的对象来调用stopPropagation()方法。...： 1.一个事件起泡对应触发的是上层的同一事件　单击two的时候就会起泡触发one单击的事件。...3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。

2.1K3 0

js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播

结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数...布尔值，指定事件是否在捕获或冒泡阶段执行。...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中图解捕获与冒泡实例:aa...当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);...cc.addEventListener('click',print,true); 再点击cc时,捕获cc,执行cc的click函数, 因为print函数中有e.stopPropagation(),所以执行完该函数后,click事件不再传播

2.6K1 0

js事件冒泡

什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件捕获*（****event capturing****）*：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...兼容性 IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他们使用的是一下方法代替：添加事件：

11.8K4 2

Jquery 事件冒泡

什么是JS事件冒泡？...：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...（摘自网络）如何来阻止Jquery事件冒泡？...，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）还有一种有冒泡有关的...友情提示:事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！

2.8K7 0

事件冒泡与事件捕获

javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示：事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中：首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...点击可查看示例去示例中试一试便清楚了~ 处理事件理解了事件的捕获和冒泡机制，对于事件处理就好办了。...阻止默认事件 event.preventDefault() // 阻止事件默认动作，比如阻止 submit 按钮默认提交 event.stopPropagation() // 阻止捕获和冒泡阶段中事件的进一步传播...，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失事件代理：从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点因此，我们可以将事件处理函数绑定在父节点上面

1.7K1 0

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...事件冒泡的示例编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。完整事件冒泡示例代码 <!...阻止默认行为阻止表单提交 $('#form1').submit(function(event){ event.preventDefault(); }) 这个是阻止表单提交的默认行为，这个行为和阻止冒泡可以合并一起写...合并阻止操作实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法

5.5K4 1

js --- 事件冒泡事件捕获

先上结论：　　他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。方法：阻止事件冒泡和默认行为。事件冒泡：　 ? 　　阻止默认行为： ?

12.1K2 0

事件监听函数，以及事件的捕获和冒泡机制

事件一般是用于浏览器和用户操作之间的交互，当用户执行某些特殊的操作时，浏览器给予反应，触发绑定的事件，事件流，事件发生时会在元素节点和根节点之间按照约定的顺序传播，事件经过的所有节点都会受到事件的影响，...这个传播过程被称为DOM事件流函数事件事件一般是用于浏览器和用户操作之间的交互，当用户执行某些特殊的操作时，浏览器给予反应，触发绑定的事件事件流，事件发生时会在元素节点和根节点之间按照约定的顺序传播...，事件经过的所有节点都会受到事件的影响，这个传播过程被称为DOM事件流 true是捕获，false是冒泡，默认为冒泡事件 1.addEventListener()－－添加事件监听函数给元素添加一个事件...3.利用事件的捕获和冒泡做点事情 addEventListener()和removeEventListener()其实拥有三个参数，刚才说过了，第一个表示触发条件，第二个表示触发事件，第三个参数正常情况下可以省略...2.缺点：一个元素只能绑定一个事件处理函数，只会在事件冒泡中运行 DOM2级事件处理程序该级别的事件处理程序，运用的就是事件捕获和冒泡机制测试

1.2K1 0

javascript入门到进阶 - 事件冒泡和事件委托详解

事件冒泡 ❝当一个子元素的事件被触发的时候（例如onclick事件），该事件会从事件（被电击的元素）开始逐个向上传播，触发父级元素的点击事件 ❞ 上图吧 ?...，直到传播到document对象我自己画了一个事件冒泡的示意图如下 ?...(不理解冒泡的可以去百度下) ❞ ❝定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。...事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。...❞ ❝事件委托的好处： ❞ ❝事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

5722 0

JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）

讲事件冒泡、阻止冒泡和事件捕获之前先说说什么是事件流，这样会更容易明白一、事件和事件流 1、什么是事件事件是可以被 JavaScript 侦测到的行为。...二、事件冒泡看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window。...三、阻止冒泡 1、JS阻止事件冒泡我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。...,和之前的顺序就不一样了。

10.4K5 3

js事件防止冒泡

停止事件传播事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...单击样式转换器的其它地方则能够折叠和扩展整个区域。 3. 默认操作假设我们把单击事件处理程序注冊到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时。...那么在事件对象上调用.stopPropagation()方法也无济于事，由于默认操作不是在正常的事件传播流中发生的。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。...这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

2.4K4 0

Vue 阻止事件冒泡

Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介如下图，当我们点击页面某个元素时，会产生点击事件...，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。...正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话） ?...结论综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。...某些元素(如带href属性的超链接元素a)拥有自身的默认事件（事件冒泡结束之后开始执行，并且不受.stop影响）,如果不希望元素响应默认事件，可以给元素事件增加.prevent。

3.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭