理解js的事件冒泡和事件捕获

Jeffrrey 发布于2019-08-22 16:40 / 1392人阅读

摘要：理解的事件冒泡和事件捕获定义冒泡作用于子元素上的事件会一级一级向上传递，类似于冒泡的形式。事件捕获我们把代码中的改为然后再次运行，结果如图此时事件实在捕获阶段执行，也就是说会先触发的事件。

理解js的事件冒泡和事件捕获 定义

冒泡：作用于子元素上的事件会一级一级向上传递，类似于冒泡的形式。
捕获：作用于父元素的事件会一级一级向下传递到最终的子元素。

使用方法

文档请参考addEventListener，以及runnoob的addEventListener

EventTarget.addEventListener()语法：

element.addEventListener(event, function, useCapture)

注意useCapture参数，他是一个boolean值，指定事件是否在捕获或冒泡阶段执行。默认为false，如果指定为true，表明在捕获阶段执行，指定为true，表明在冒泡阶段执行。

案例参考

先看如下代码：




    
    test
    



    我是父亲
    我是儿子

使用浏览器运行这段代码，效果如下：

我们点击儿子div，控制台打印如下：

可以看到第一次打印的target和currentTarget都是son，而第二次事件冒泡到了parent，此时target是son，currentTarget变成了parent。

事件捕获

我们把代码中的useCapture改为true：

let pa = document.getElementById("parent");
pa.addEventListener("click", handler, true);
let son = document.getElementById("son");
son.addEventListener("click", handler, true);

然后再次运行，结果如图：

此时事件实在捕获阶段执行，也就是说会先触发parent的click事件。

target和currentTarget的区别

仔细看前面的打印信息就知道了，target始终不变，它代表触发事件的那个元素（不管是冒泡阶段还是捕获阶段都是指最底层的元素（这里指son）。而currentTarget则表示当前阶段注册了EventListener的元素。

如何阻止冒泡和捕获阶段事件的进一步传播

文档参考：event.stopPropagation

API用法：

event.stopPropagation()

修改我们的代码，在handler中加入event.stopPropagation()：

    function handler(event) {
        console.log("target: ", event.target);
        console.log("curtrentTarget: ", event.currentTarget);
        event.stopPropagation();
    }

再次运行，点击儿子div，打印出来的日志如下（冒泡阶段）：

捕获阶段打印日志：

可以看到，冒泡阶段，点击事件没有继续向上传播到父元素；捕获阶段，点击事件没有继续向下传播到子元素。

P.S. 请考虑下在handler方法中，this到底指向target还是currentTarget呢？

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

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

JS 中的事件冒泡与捕获

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

Rindia 2019-08-20 11:40 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

SimonMa 2019-08-29 12:33 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

raoyi 2019-08-20 16:25 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

2i18ns 2019-08-01 16:47 评论0 收藏0
深入理解js Dom事件机制（一）——事件流

摘要：事件捕获提出的事件流模型称为事件捕获。事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。首先我们思考一个很有意思的事情：一张纸上画了两个同心圆，当我们把手指放到圆心上时，手指指向的不是一个圆，而是纸上的两个圆，同理之，当我们单击网页上的一个div...

OBKoro1 2019-08-21 17:34 评论0 收藏0