八零在线优社区

 找回密码
 帐号注册

QQ登录

只需一步,快速开始

搜索
热搜: PhotoShop
查看: 155|回复: 0

利用冒泡实现JS事件委托

[复制链接]
发表于 2015-9-16 11:24:14 | 显示全部楼层 |阅读模式
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
  也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
  好处呢:1,提高性能。
  我们可以看一个例子:需要触发每个li来改变他们的背景颜色。
  1. <ul id="ul">
  2.   <li>aaaaaaaa</li>
  3.   <li>bbbbbbbb</li>
  4.   <li>cccccccc</li>
  5. </ul>
复制代码
  1. window.onload = function(){
  2.   var oUl = document.getElementById("ul");
  3.   var aLi = oUl.getElementsByTagName("li");

  4.   for(var i=0; i<aLi.length; i++){
  5.     aLi[i].onmouseover = function(){
  6.       this.style.background = "red";
  7.     }
  8.     aLi[i].onmouseout = function(){
  9.       this.style.background = "";
  10.     }
  11.   }
  12. }
复制代码
这样我们就可以做到li上面添加鼠标事件。  但是如果说我们可能有很多个li用for循环的话就比较影响性能。
  下面我们可以用事件委托的方式来实现这样的效果。html不变
  1. window.onload = function(){
  2.   var oUl = document.getElementById("ul");
  3.   var aLi = oUl.getElementsByTagName("li");

  4. /*
  5. 这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
  6. ie:window.event.srcElement
  7. 标准下:event.target
  8. nodeName:找到元素的标签名
  9. */
  10.   oUl.onmouseover = function(ev){
  11.     var ev = ev || window.event;//事件兼容处理
  12.     var target = ev.target || ev.srcElement;//获取事件源兼容处理
  13.     //alert(target.innerHTML);
  14.     if(target.nodeName.toLowerCase() == "li"){
  15.     target.style.background = "red";
  16.     }
  17.   }
  18.   oUl.onmouseout = function(ev){
  19.     var ev = ev || window.event;
  20.     var target = ev.target || ev.srcElement;
  21.     //alert(target.innerHTML);
  22.     if(target.nodeName.toLowerCase() == "li"){
  23.     target.style.background = "";
  24.     }
  25.   }
  26. }
复制代码
好处2,新添加的元素还会有之前的事件。
  我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li
  如:
  1. <input type="button" id="btn" />
  2. <ul id="ul">
  3.   <li>aaaaaaaa</li>
  4.   <li>bbbbbbbb</li>
  5.   <li>cccccccc</li>
  6. </ul>
复制代码
不用事件委托我们会这样做:
  1. window.onload = function(){
  2.   var oUl = document.getElementById("ul");
  3.   var aLi = oUl.getElementsByTagName("li");
  4.   var oBtn = document.getElementById("btn");
  5.   var iNow = 4;
  6.   for(var i=0; i<aLi.length; i++){
  7.     aLi[i].onmouseover = function(){
  8.       this.style.background = "red";
  9.     }
  10.     aLi[i].onmouseout = function(){
  11.       this.style.background = "";
  12.     }
  13.   }

  14.   oBtn.onclick = function(){
  15.     iNow ++;
  16.     var oLi = document.createElement("li");
  17.     oLi.innerHTML = 1111 *iNow;
  18.     oUl.appendChild(oLi);
  19.   }

  20.   
  21. }
复制代码
这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
  因为点击添加的时候for循环已经执行完毕。
  那么我们用事件委托的方式来做。就是html不变
  1. window.onload = function(){
  2.   var oUl = document.getElementById("ul");
  3.   var aLi = oUl.getElementsByTagName("li");
  4.   var oBtn = document.getElementById("btn");
  5.   var iNow = 4;

  6.   oUl.onmouseover = function(ev){
  7.     var ev = ev || window.event;
  8.     var target = ev.target || ev.srcElement;
  9.     //alert(target.innerHTML);
  10.     if(target.nodeName.toLowerCase() == "li"){
  11.     target.style.background = "red";
  12.     }
  13.   }
  14.   oUl.onmouseout = function(ev){
  15.     var ev = ev || window.event;
  16.     var target = ev.target || ev.srcElement;
  17.     //alert(target.innerHTML);
  18.     if(target.nodeName.toLowerCase() == "li"){
  19.     target.style.background = "";
  20.     }
  21.   }
  22.   oBtn.onclick = function(){
  23.     iNow ++;
  24.     var oLi = document.createElement("li");
  25.     oLi.innerHTML = 1111 *iNow;
  26.     oUl.appendChild(oLi);
  27.   }
  28. }
复制代码

ok:
  如同在我们用微博中,新发微博照样有之前的鼠标事件。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 帐号注册

本版积分规则

QQ|小黑屋|手机版|八零在线优社区 ( 赣ICP备15001736号-2 )

GMT+8, 2018-2-18 04:58

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表