JS 冒泡和捕获是怎么回事

KavenFan 发布于2019-08-26 13:35 / 2203人阅读

摘要：冒泡和捕获是怎么回事看网上说的也不是太明白，我给重新整理下。参阅冒泡和捕获是指在元素上的事件被触发的时候，传递事件的两种方向，或者说过程。至于这三个事件触发的顺序，就是所谓的冒泡和捕获。冒泡和捕获只是方向的不同而已。

JS 冒泡和捕获是怎么回事

看网上说的也不是太明白，我给重新整理下。 参阅：https://www.cnblogs.com/alvin...

冒泡和捕获是指在元素上的事件被触发的时候，js 传递事件的两种方向，或者说过程。

前言：

如，有这么一个页面和 js 方法

Less: 我用 less写的，如果没有 less 环境，可以无视这段。

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $("lv1").addEventListener("click",()=>{console.log("lv1")},true);
    $("lv2").addEventListener("click",()=>{console.log("lv2")},true);
    $("lv3").addEventListener("click",()=>{console.log("lv3")},true);
};
// 上面的 () => {} 为 ES6 的匿名方法的定义方式
// 等同于
function () {
    console.log("lv1")
}

上面的 js 做的事：
在页面载入的时候，给三个 div 添加 click 监听方法，自己被点击的时候会在 console 中输出自己的 id 值。

页面的结构是这样的 lv1 包含 lv2，lv2 又包含 lv3，当点击 lv3 的时候，其实也点击了 lv2 和 lv1，因为 lv3 在 lv2 内部，点击 lv3 的时候，自然也点击了 lv2 和 lv1，也就是说，点击 lv3 的时候，会触发三个 click 事件。
至于这三个事件触发的顺序，就是所谓的冒泡和捕获。

事件触发经过的三个阶段：

捕获阶段：先由文档的根节点 document 往事件触发对象，从外向内捕获事件对象；

定位目标：寻找到目标事件位置（事发地），触发事件；

冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

1. 捕获阶段

如上面的例子，在 lv3 被点击的时候，js 会从文档的最上层开始，由外向内寻找点击事件的起源，也就是 lv3。那么这个由外向内的过程就是 lv1 --> lv2 --> lv3，这三个 div 的 click 事件按照这个过程依次被触发。
这个触发的方向就是捕获的方向。

2. 冒泡阶段

在找到被点击的 lv3 之后，事件向上传递，过程是 lv3 --> lv2 --> lv1，此时依次触发 lv3、lv2、lv1 的 click 事件，这个由内向外的触发过程就称为冒泡

再回看一下最常用的事件绑定方法的格式：

element.addEventListener(event, function, useCapture)

这里面，useCapture 是个布尔值，用于定义事件是在冒泡阶段触发，还是在捕获阶段触发，默认值是 false，代表在冒泡时触发。

此时你就会知道上面那个例子里定义的 click 方法是在 捕获阶段 执行，那么返回的结果就是

lv1
lv2
lv3

如果最上面的例子，onload 内容是这样的

 window.onload = () => {
        $("lv1").addEventListener("click",()=>{console.log("lv1")},false);
        $("lv2").addEventListener("click",()=>{console.log("lv2")},false);
        $("lv3").addEventListener("click",()=>{console.log("lv3")},false);
    };

那么也就是说， click 事件在 冒泡阶段触发，返回的结果就是

lv3
lv2
lv1

总结

冒泡和捕获的关系，只会出现在包含和被包含的结构中，兄弟关系是不会有这种关系的。
冒泡和捕获只是方向的不同而已。

GPU云服务器云服务器是怎么回事呢云存储是怎么回事大数据是怎么回事物联网是怎么回事

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

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

JS 冒泡和捕获是怎么回事

摘要：冒泡和捕获是怎么回事看网上说的也不是太明白，我给重新整理下。参阅冒泡和捕获是指在元素上的事件被触发的时候，传递事件的两种方向，或者说过程。至于这三个事件触发的顺序，就是所谓的冒泡和捕获。冒泡和捕获只是方向的不同而已。 JS 冒泡和捕获是怎么回事看网上说的也不是太明白，我给重新整理下。参阅：https://www.cnblogs.com/alvin... 冒泡和捕获是指在元素上的事...

scola666 2019-08-02 14:29 评论0 收藏0
浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

摘要：目标阶段真正点击的元素的事件发生了两次，因为在上面的代码中，既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。所以很明显用直接绑定的事件发生在了冒泡阶段。如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。特别少...

mylxsw 2019-08-21 10:38 评论0 收藏0
javascript 之事件篇

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

Forest10 2019-08-21 16:17 评论0 收藏0
preventDefault,stopPropagation,return false三者的区别

摘要：与之顺序相反的是事件捕获。可以理解为是的升级版，除了阻止冒泡，还能阻止结束掉当前对象未执行的其它绑定事件方法。作者以乐之名本文原创，有不当的地方欢迎指出。参考文章之间的区别逛帖子的时候看到道友发的前端面试题， preventDefault(), stopPropagation(), return false三者的区别这三者的使用想必大家并不陌生，但是细想之下还是有可究之处。 pre...

bladefury 2019-08-20 19:05 评论0 收藏0