JS进阶之事件冒泡及委托

1.事件冒泡和捕获

• 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)
• 为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。
• 冒泡：从内到外（目前浏览器支持的方式）
• 捕获：从外到内
• 阻止冒泡的方法：event.stopPropagation();

eg：

<!-- 事件冒泡 -->
     <h1>事件冒泡 </h1>
     <div class="div1">
         div1
         <div class="div2">
             div2
             <div class="div3">
                 div3
             </div>
         </div>
     </div>

    document.querySelector(".div1").onclick = function(e){ 
        console.log("div1");
    }
    document.querySelector(".div2").onclick = function(e){ 
        console.log("div2");
    }
    document.querySelector(".div3").onclick = function(e){ 
        //阻止事件冒泡
        e.stopPropagation();
        console.log("div3");
    }

效果：
点击div1————console.log(“div1”)
点击div2————console.log(“div2”)+console.log(“div1”)
点击div3————console.log(“div3”)

2.事件委托（事件冒泡的应用实例）

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

eg：

     <!-- 事件委托 -->
     <h1>事件委托 </h1>
     <ul id="list">
         <li>11111</li>
         <li>2222</li>
         <li>3333</li>
         <li>4444</li>
     </ul>

    //方法一、傻傻地一个个去领取
    var list = document.getElementById("list");
    var li = list.getElementsByTagName("li");
    for(var i=0; i<li.length; i++) {
         li[i].onclick = function(){  
         this.style.color = 'red';
      }
    
    
    //   }
    //方法二、事件委托 将事件绑定到父节点，点击子节点通过事件冒泡到父并处理
    var list = document.getElementById("list"); 
    list.onclick = function(e){
        if (e.target.nodeName === 'LI') {
          e.target.style.color = 'red';
        }
      }

3.事件对象event的几个方法

• event.target; 触发事件的元素
• event.currentTarget; 绑定事件的元素
• this 绑定事件的元素

     <!-- event.target 和 event.currentTarget -->
     <div class="d1">
        div1
        <div class="d2">
            div2
            <div class="d3">
                div3
            </div>
        </div>
    </div>

        document.querySelector(".d1").onclick = function(e){ 
        console.log('1111');
        this.style.color = 'blue'; //点任意一个都会变蓝
        e.target.style.color = 'yellow';  //e.target不会变化  指向的是触发的对象 点哪个哪个变黄
        e.currentTarget.style.color = 'yellow';  //点任意一个都会变黄
    }