JavaScript 详说事件机制之冒泡、捕获、传播、委托

朱雀 2021-05-12 11:55 458阅读 0赞

DOM事件流（event  flow ）存在三个阶段：**事件捕获阶段、处于目标阶段、事件冒泡阶段。**

**事件捕获*（event  capturing）*：**通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始**由外到内**进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

**事件冒泡*（dubbed  bubbling）*：**与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是**事件传播.**

dom标准事件流的触发的先后顺序为：**先捕获再冒泡**，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。

***　　addEventListener(event, listener, useCapture)***

*·参数定义：*event---（事件名称，如click，不带on），listener---事件监听函数，*useCapture---*是否采用事件捕获进行事件捕捉，默认为false，即采用事件冒泡方式

addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

***attachEvent(event,listener)***

·*参数定义*：event---（事件名称，如onclick，带on），listener---事件监听函数。

attachEvent主要用于IE浏览器，并且仅在IE10及以下才支持，IE11已经废了这个方法了。

1、示例：通过"addEventListener"方法，采用事件冒泡方式给dom元素注册click事件，点击子元素会发生什么呢？

<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>js事件机制</title>
        <style>
            #parent{
                width: 200px;
                height:200px;
                text-align: center;
                line-height: 3;
                background: green;
            }
            #child{
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background: orange;
            }
        </style>
        </head>
    <body>
        <div id="parent">
            父元素
            <div id="child">
                子元素
            </div>
        </div>
        <script type="text/javascript">
            var parent = document.getElementById("parent");
            var child = document.getElementById("child");
        
            document.body.addEventListener("click",function(e){
                console.log("click-body");
            },false);
            
            parent.addEventListener("click",function(e){
                console.log("click-parent");
            },false);
    
            child.addEventListener("click",function(e){
                console.log("click-child");
            },false);
        </script>
    </body>
    </html>

![70][]

事件触发顺序是由内到外的，这就是事件冒泡，虽然只点击子元素，但是它的父元素也会触发相应的事件。

这里有同学可能要问了，如果点击子元素不想触发父元素的事件怎么办？肯定可以的，那就是停止事件传播\---event.stopPropagation();

child.addEventListener("click",function(e){
    　　console.log("click-child");
      　e.stopPropagation();
    },false);

在点击子元素的时候就只弹出了子元素那条信息，父元素的事件没有触发，因为事件已经停止传播了，冒泡阶段也就停止了。

2、示例：事件捕获

将上面代码中，三个绑定时间的addEventListener方法，第三个参数都改成true，这样点击最里层元素，会输出：click-body，click-parent，click-child

3、委托：

委托，让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。好处：

*  提高性能：例如，当有很多li同时需要注册时间的时候，如果使用传统方法来注册事件的话，需要给每一个li注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能
 *  新添加的元素还会有之前的事件

在JQuery中已经得到了实现委托，即通过$(*selector*).on(*event,childSelector,data,function,map*)实现委托，一般用于动态生成的元素，当然JQuery也是通过原声的js去实现的，下面举一个简单的栗子，通过js实现通过parent元素给child元素注册click事件

var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    parent.onclick = function(e){
                if(e.target.id == "child"){
                    console.log("您点击了child元素")
                }
    }

虽然没有直接只child元素注册click事件，可是点击child元素时却弹出了提示信息。

[70]: /images/20210511/2bbc21affba34111a8fbc00a9516ba50.png