事件冒泡和事件委托

一、事件冒泡
例1：
html部分

<body>
    <div id="d1">1
        <div id="d2">2
            <div id="d3">3</div>
        </div>
   </div>

js部分

 //事件冒泡
        document.getElementById("d1").onclick = function(e){
            console.log('d1');
        };
        document.getElementById("d2").onclick = function(e){
            console.log('d2');
        }
        document.getElementById("d3").onclick = function(e){
            event.stopPropagation(); //阻止事件冒泡
            console.log('d3');
        };

解析：由代码结构可知，这是一个三层div嵌套结构，d1是d2的父级，d2是d3的父级。在js部分我们绑定了三个点击事件onclick，触发事件后会打印出对应div的id名，当我们注释掉 event.stopPropagation();时，打印结果如下：

1.点击d2：

点击d2(存在冒泡)

2.点击d3：

点击d3(存在冒泡)

之所以出现上述的情况，就是因为存在事件冒泡，当事件经历由捕获到冒泡的过程，以至于默认该元素和它的父级元素均触发了点击事件，所以点击d3会出现由d3,d2,d1依次打印的情况。
现在需要阻止d3事件冒泡，只需要在d3的点击函数中添加这个代码event.stopPropagation()即可。打印结果如下：

3.点击d3：

点击d3(已阻止冒泡)

二、事件委托
通俗定义：用冒泡的原理，将元素的绑定事件加到该元素的父级上处理。
好处：节省资源，可以代码复用
例2：当我们不使用事件委托的时候：
html部分：

<div>
        <ul id="list">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </div>

js部分：

 //事件触发
        var list = document.getElementById("list");
        var li = list.getElementsByTagName("li");
        for(let i = 0;i<li.length;i++){
            li[i].onclick = function(){
                console.log(this.innerHTML);
            }
        }

当我们依次点击每个li时，打印结果如下：

直接事件触发

、
例3：使用事件委托
html部分：

<div>
        <ul id="list">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </div>

js部分：

//事件委托的实现
        list.onclick = function(e){
            var e = e || window.event;
            e.target = e.target || e.srcElement;
            if(e.target.nodeName.toLowerCase()=="li"){
                console.log(e.target.innerHTML)
            }
        }

当我们依次点击每个li时，打印结果如下：

采用事件委托

解释：虽然在打印结果上看不到区别，但是对于计算机资源的利用是不同的，我们在绑定事件时可用考虑使用时间委托来提高自己的代码复用率，减少资源浪费。

最后编辑于：2019.04.13 10:59:49