js手札--关于事件冒泡与事件捕获

lentoo 发布于2019-08-19 18:35 / 3300人阅读

摘要：一冒泡和捕获事件执行子元素在执行某个事件的前后，会引起上层元素触发相同事件。三补充关于和这两个其实和捕获与冒泡一点关系都没有，是用来阻止事件的默认行为的。

一、冒泡和捕获

事件执行：子元素在执行某个事件的前后，会引起上层元素触发相同事件。例：我点击了div，那么不光div会执行click事件，上层的body和html等等也会执行click。

冒泡与捕获解决了：事件执行顺序由谁开始，由谁结束

事件冒泡：click执行顺序（div -> body -> html -> document）

事件捕获：click执行顺序（document -> html -> body -> div）

冒泡与捕获方法

IE < 9：只冒泡

    target.attachEvent(eventName, callback)  //只能冒泡
    target.detachEvent(eventName, callback)

IE9+ | chrome | firefox | safari：冒泡+捕获

    target.addEventListener(eventName, callback) // 冒泡方式
    target.removeEventListener(eventName, callback)
    
    target.addEventListener(eventName, callback, true)  // 捕获方式
    target.removeEventListener(eventName, callback, true)

（一）事件冒泡

啥也不说，看例子，点击t2区域：

很明显的，由内而外，没啥可说的。我这边没装IE，所以所以测试都是在（chrome，firfox，safari中测试的）。

（二）事件捕获

同样点击t2区域，可以见到变成由外而内：

（三）先捕获后冒泡

这次点击t1区域，先捕获，后冒泡

二、阻止冒泡和捕获

IE和Netscape的阻止方式

IE：event.stopPropagation()

Netscape：e.cancelBubble = true;

（一）阻止冒泡

同样点击t2区域，可以见到t3的click事件就不会被触发了。

（二）阻止捕获

同样点击t2区域，可以见到t2的click事件没有被触发。因为我们在触发t3的时候，让捕获停止了，那样t2也就接受不到要触发click的消息了，也就over了。

三、补充

关于Netscape: preventDefault()和IE: event.returnValue

这两个其实和捕获与冒泡一点关系都没有，是用来阻止事件的默认行为的。如：我点击标签，正常说会执行跳转相应网页。但加入preventDefault()后就不会跳转了。

看例子：
照理说我点击了t1, 那应该会正常跳转才对

但加了下面的代码之后，就跳不动了。

总算结束了，每次去查捕获和冒泡的资料都发现会附带着preventDefault，也是懵了。一开始我以为preventEvent是阻止捕获的，stopPropagation是阻止冒泡的，后来发现其实压根就不是这样，也是我看的不仔细啊。唉，路还长着，继续，前行。

私有云专线服务 js阻止冒泡事件冒泡事件事件冒泡事件冒泡机制

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

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

JS 中的事件冒泡与捕获

摘要：在之前是只支持事件冒泡，包括之后和目前主流的浏览器都同时支持两种事件。中可以用来取消事件冒泡。刚接触 JS 的那个时候，啥也不懂，只想着如何利用 Google、百度到的函数来解决实际的问题，不会想到去一探究竟。渐渐的，对 JS 的语言的不断深入，有机会去了解一些原理性东西。最近在看 JQuery 源码，感触很多，总想着用原生的 JS 去实现自己的一个 JQuery 库。说实在的，J...

Rindia 2019-08-20 11:40 评论0 收藏0
原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
JS复习-JS中事件的捕获与冒泡

摘要：也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获，事件冒泡的引用场景，有事件委托等。下面引用两篇文章。什么是捕获？什么是冒泡？给元素绑定事件会经历三个阶段：一：捕获阶段(capture phase)--先从根元素流向目标元素；二：目标阶段(target phase)--在目标元素上的事件被触发；三：冒泡阶段(bubbling phase)--目标元素流向根元素就像你中...

BakerJ 2019-08-02 15:31 评论0 收藏0
JS复习-JS中事件的捕获与冒泡

摘要：也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获，事件冒泡的引用场景，有事件委托等。下面引用两篇文章。什么是捕获？什么是冒泡？给元素绑定事件会经历三个阶段：一：捕获阶段(capture phase)--先从根元素流向目标元素；二：目标阶段(target phase)--在目标元素上的事件被触发；三：冒泡阶段(bubbling phase)--目标元素流向根元素就像你中...

haoguo 2019-08-23 18:37 评论0 收藏0
JS复习-JS中事件的捕获与冒泡

摘要：也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获，事件冒泡的引用场景，有事件委托等。下面引用两篇文章。什么是捕获？什么是冒泡？给元素绑定事件会经历三个阶段：一：捕获阶段(capture phase)--先从根元素流向目标元素；二：目标阶段(target phase)--在目标元素上的事件被触发；三：冒泡阶段(bubbling phase)--目标元素流向根元素就像你中...

dcr309duan 2019-08-30 11:22 评论0 收藏0