JavaScript 事件冒泡和捕获模式

binaryTree 发布于2019-08-26 13:41 / 2364人阅读

摘要：捕获模式，的第三个参数为则为捕获模式，点击时事件触发顺序为冒泡模式，不填写的第三个参数为冒泡模式，点击时事件触发顺序为取消冒泡取消冒泡，取消冒泡后事件就不会往上层传递，这时只有监听的事件被执行冒泡和捕获的执行顺序如果同时使用冒

捕获模式

1，addEventListener 的第三个参数 useCapture 为 true 则为捕获模式
2，点击 C 时事件触发顺序为 A -> B -> C

冒泡模式

1，不填写 addEventListener 的第三个参数为冒泡模式
2，点击 C 时事件触发顺序为 C -> B -> A

取消冒泡

// 取消冒泡
event.cancelBubble = true

1，取消冒泡后事件就不会往上层传递
2，这时只有监听 C 的事件被执行

冒泡和捕获的执行顺序

如果同时使用冒泡和捕获，先监听谁就先执行谁

专线服务混合云冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109330.html

javascript 之事件篇

摘要：处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时，会产生一个事件对象。 js 是采用异步事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。事件源：产生事件的地方（html元素，窗口，其他等等)；事件：鼠标事件，键盘...

Forest10 2019-08-21 16:17 评论0 收藏0
javascript 之事件篇

摘要：处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时，会产生一个事件对象。 js 是采用异步事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。事件源：产生事件的地方（html元素，窗口，其他等等)；事件：鼠标事件，键盘...

sunnyxd 2019-08-05 12:00 评论0 收藏0
白话解释 Javascript事件preventDefault,stopPropagation及re

摘要：如图使用事件捕获模式注册事件监听对最外层，中间层，最内层分别用捕获模式注册事件监听，我们上面说了，如果使用捕获模式，那么第三个参数应该是，否则则是冒泡模式，如果不声明，默认为冒泡模式。来源: 个人博客想必好多童鞋都有直接复制粘贴event.preventDefault() 或者event.stopPropagation() 的经历，但是为什么这样做不甚了解，今天我们的目的就是要彻...

chanjarster 2019-08-21 15:09 评论0 收藏0
理解DOM事件流的三个阶段

摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。本文主要解决两个问题：什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...

xiangzhihong 2019-08-19 17:38 评论0 收藏0
理解DOM事件流的三个阶段

摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。本文主要解决两个问题：什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...

afishhhhh 2019-08-01 15:04 评论0 收藏0