首页 > 代码库 > JS事件委托学习

JS事件委托学习

2024-07-22 16:24:54   219人阅读

JS 事件委托就是利用冒泡原理，把事件加到父级上触发，执行效果。

好处:
1.提高性能
2.新添加的元素还会有之前的事件
 
 
<ul id="ul">
     <li>111111</li>
     <li>22222</li>
     <li>333333</li>
     <li>444444</li>
</ul>
 
这样一个HTML结构
  我想要给LI增加一个鼠标点击的效果通常写法
 
window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")
   for(var i = 0; i <oLi.length; i++){
      oLi[i].onclick = function(){
         alert(123)
      }
   }
}
 
如果事件委托呢，我会把时间委托给ul  就把for 循环直接改
 
oUl.onclick = function(){
     alert(1123)
}
 
接下来我们想写过一个，给LI加一个鼠标经过的效果 默认我肯定会这样写：
 
window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")
   for(var i = 0; i <oLi.length; i++){
      oLi[i].onmouseover = function(){
         this.style.background = "red"
      }

      oLi[i].onmouseout = function(){
         this.style.background = ""
      }
   }
}
 
如果我用事件委托的写法:
 
event对象，事件源，无论你操作等你个对象的事件
 
event对象有兼容想
 
 IE  ：window.event.srcElement;
标准  ： event.target;
 

window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")

   oUl.onmouseover = function(ev){
       var ev = ev || window.event; //事件
       var target =  ev.targe || ev.srcElement; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
       if(ev.target.nodeName.toLocaleLowerCase()=="li"){   // 事件在LI 上面才执行增加背景颜色
          ev.target.style.background = "red"
       }

   }
   oUl.onmouseout = function(ev){
       var ev = ev || window.event;
       var target =  ev.targe || ev.srcElement;
       ev.target.style.background = ""
   }

}
 
新增加元素还会有原来的事件总代码
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")
   var obtn = document.getElementById("input");
   var iNow =4;
   oUl.onmouseover = function(ev){
       var ev = ev || window.event; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
       var target =  ev.targe || ev.srcElement;
       if(ev.target.nodeName.toLocaleLowerCase()=="li"){
          ev.target.style.background = "red"
       }

   }
   oUl.onmouseout = function(ev){
       var ev = ev || window.event;
       var target =  ev.targe || ev.srcElement;
       ev.target.style.background = ""
   }

   obtn.onclick=function(){
      iNow++;
      var oLi = document.createElement("li");
      oLi.innerHTML = iNow * 11111;
      oUl.appendChild(oLi)
   }
}


</script>
</head>

<body>
<input type = "button"  value= "增加" id = "input" />
<ul id="ul">
     <li>111111</li>
     <li>22222</li>
     <li>333333</li>
     <li>444444</li>
  </ul>
</body>
</html>

JS事件委托学习


联系
我们