事件委托(事件代理)(传统的,vue , e.target.dataset.index)

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

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

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

<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;
   }
})

你可能感兴趣的:(js)