什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,onerror等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

比如说你本来是在一个子元素里面的一个事件,但是子元素太多了,这样循环起来就比较耗资源,这个时候就可以把子元素的相关事件委托到父类来做,下面用一个代码来说明。需要触发每个li来改变他们的背景颜色。

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>
<script type="text/javasxript">
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i<aLi.length; i++){
    aLi&#91;i&#93;.onmouseover = function(){
      this.style.background = "red";
    }
    aLi&#91;i&#93;.onmouseout = function(){
      this.style.background = "";
    }
  }
}
</script>

这样就可以达到鼠标移动到相应的li上面改变相应li的背景颜色,下面我们就使用委托的方式来看下,当然,相应的html代码还是不变的,只是改变js的相应的代码

<script type="text/javascript">
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
ie:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}
</script>

上面的这个把li的相应鼠标事件委托给ul这个父类元素。那么使用事件委托有什么好处呢,主要好处有以下这两点。

第一就是当li比较多的时候,使用循环各个li的事件相应的比较耗资源,性能上不是很好。

第二就是如果html后面有相应的动态添加进去,比如ajax或者相应的事件添加到li里面,那么使用普通的方法就会出现后面新增加的li没有出现相应的效果,这个是因为前面的循环已经运行过了,后面添加的相应节点就没有被循环到,就不会出现相应的效果,简单一点说就是:新添加的元素还会有之前的事件!

相关文章:

  • 暂无相关文章