事件委托（事件代理）（传统的，vue , e.target.dataset.index）

Posted 2021-07-08 fengshaopu

概念
事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

好处:
提高性能，减少了事件绑定，从而减少内存占用

事件委托原理：事件冒泡机制**

<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
  
document.addEventListener("click", function (event) {
   var target = event.target;
   switch (target.id) {
     case "doSomething":
       document.title = "事件委托";
       break;
     case "goSomewhere":
       location.href = "http://www.baidu.com";
       break;
     case "sayHi": alert("hi");
       break;
   }
})