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

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>

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

这里有同学可能要问了，如果点击子元素不想触发父元素的事件怎么办？肯定可以的，那就是停止事件传播---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元素时却弹出了提示信息。

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

猜你喜欢