Javascript

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

本文主要是介绍事件委托（事件代理）（传统的，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;
   }
})


   优点：
​     1.大量减少内存占用，减少事件注册。
​     2.新增元素实现动态绑定事件
   实现方式：
   
一、可用addEventListener();**  //所有主流浏览器，除了IE8及更早IE版本。
  
二、attachEvent()**   //IE8及IE更早版本

 

这篇关于事件委托（事件代理）（传统的，vue , e.target.dataset.index）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航