JS中的事件委托详解(未完)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中的事件委托详解(未完)相关的知识,希望对你有一定的参考价值。

什么是JS事件委托呢?

首先,我们要明确什么是事件:所谓的事件就是像:onclick,onmouseover,onmouseover.......这些事件,那委托呢?就是指原来发生在这些事件上的元素,加到其它的元素身上来完成。

JS事件委托的原理:就是利用冒泡的原理,把事件加到父级或是父级的父级身上,来触发执行操作。

使用事件委托的优势:1)提高性能;

          2)新添加的元素也会有之前加的事件;

下面我们用例子来说明一下:点击改变li的背景颜色

html部分:

 1   <ul id="ul1">
 2         <li></li>
 3         <li></li>
 4         <li></li>
 5         <li></li>
 6         <li></li>
 7         <li></li>
 8         <li></li>
 9         <li></li>
10    </ul>

 

style样式部分:

1 <style>
2 *{ margin:0; padding:0; list-style:none; }
3 ul{ overflow:hidden; }
4 li{ width:100px; height:100px; background:#ccc; float:left; margin:10px; }
5 </style>

 

<script>部分:

window.onload=function (){
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
      for(var i=0; i<aLi.length; i++){
     aLi[i].onclick=function (){
        this.style.background=‘red‘;
     };
   };
};

 

上面的例子就是我们常用的普通写法是如上这种写法,但是大家知道如果页面上有n多个li标签,就会循环无数多次,这样对性能的损耗是巨大的,所以这时候我们就可以考虑用事件委托来完成,把onclick事件加到li的父级上去。

事件委托的写法如下:

<script>
window.onload=function (){
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    oUl.onclick=function(){
        this.style.background=‘red‘;
    };
};
</script>

一步操作,省了循环,是不是一下子提高了性能呢?但有些同还可能会问,不对啊,里面的this指向的可是oUl这个元素,不再是指向了aLi[i],是的,你的分析是对的,要想用事件委托做出来跟for循环中一样的效果,我们还必须知道event对象里有一个叫事件源的东西,那什么又是事件源呢?简单讲就是不管在哪个事件中,你操作的那个元素就是事件源,并用它也是有一定的兼容性问题存在的。

在IE,chrome中事件源的获取方法是srcElement 。在FF中事件源的获取方法是target,所以我们还要给它写一个兼容的写法,并且给事件源加样式,就完成了跟for循环一样的效果。

<script>
window.onload=function (){
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    oUl.onclick=function(ev){
        var oEvent=ev||event;
        var target=oEvent.srcElement||oEvent.target;
        target.style.background=‘red‘;
    };
};
</script>

不过这还不算完,为什么呢?因为有些同学在点页面的时候突然会点到ul的区域,会出现了整个Ul都变红色的情况,那我们肯定是不希望触发ul的这个事件呢,所以还需要进行有效的判断,在这里面我们判断的时候用到了tagName。

<script>
window.onload=function (){
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    oUl.onclick=function(ev){
        var oEvent=ev||event;  //事件兼容写法。
        var target=oEvent.srcElement||oEvent.target; //事件源兼容写法。
        if(target.nodeName!=‘Li‘) return;  //判断如果节点的名字不是LI就返回。
        target.style.background=‘red‘;
    };
};
</script>

好,完美了!

 

以上是关于JS中的事件委托详解(未完)的主要内容,如果未能解决你的问题,请参考以下文章

js中的事件委托或是事件代理详解

js中的事件委托(事件代理)详解

js中的事件委托或是事件代理详解

js中的事件委托或是事件代理详解

js中的事件委托或是事件代理详解

js中的事件委托或是事件代理详解