首页 > 代码库 > 事件委托

事件委托

2024-08-30 18:17:31   220人阅读

优点：节省内存，减少事件注册；当新增子对象时无需再次对其绑定事件。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
   window.onload=function(){
      var ul=document.getElementById("list");
      ul.onclick=function(ev){
         var ev=ev||window.event;
         var target=ev.target||ev.srcElement; //取得事件目标对象
         if(target==ul||target.tagName=="UL"){
            return;
         }
         var aLi=ul.getElementsByTagName("li");
         for(i=0;i<aLi.length;i++){
            (function(index){
               aLi[index].index=index;
            })(i)
         };
         alert (target.index);
      }
      var btn=document.getElementById("btn");
      btn.onclick= function () {
         ul.appendChild(document.createElement("li"));
      }
   }
   </script>
</head>
<body>
   <ul id="list">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
   </ul>
   <button id="btn">add</button>
</body>
</html>

事件委托


联系
我们