事件委托

在js里常常听到事件委托,下面就我所理解的用自己的语言整理出来。

 

1:事件委托利用的是冒泡的原理,把事件添加到它对应的父级(or 父父级)上面,触发执行相应的效果

 

1.0:

<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(){
            alert(123);
        };
    }*/
    
    oUl.onclick = function(){
        alert(123);
    };

};

</script>
</head>

<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
</body>
</html>

a:上述的代码比较简单,把原本遍历的li事件委托在他的父级上面,移入到li就会触发ul的事件。避免使用循环,提高页面性能。

 

1.1,如下代码:

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

</script>
</head>
<body>
<ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
</ul>
</body>
</html>

 

b:此时需要完成这样的效果,移入到每个li的时候改变它的背景色,此时如果笼统地直接把事件委托给父级ul是无法实现的,移入li都会变色。

c:要完成这个事件委托就要用到两个东西,事件源当前事件源标签的名字

可是事件源是什么东西呢?顾名思义,事件的源头,也就是当前操作的那个元素啦。

//ie : window.event.srcElement    //事件源
  标准下 :event.target


//nodeName : 找到当前元素的标签名   //弹出的元素名都是大写

 

 

window.onload = function(){

    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = 'red';
        }
    
    };
    
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = '';
        }
        
    };

};

此时ul里的事件源有两个,分别是ul和li,要想只选定li,必须把上述代码作了一个判断,判断只当事件源的标签名与li相等时才触发。也就是只作用到自己所需要的元素上。

 

2:此时有一个需求,就是动态创建的子元素也需要具备相同元素的事件,拿li举例,如果想实现,利用li的for循环是无法成功的,

for循环的执行已经在新添加的事件之前结束了。此时利用事件委托就很好办了。

 

<script>

window.onload = function(){

    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var oInput = document.getElementById('input1');
    var iNow = 4;
    
    
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = 'red';
        }
    
    };
    
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = '';
        }
        
    };
    
    oInput.onclick = function(){
        iNow++;

        var oLi = document.createElement('li');
        oLi.innerHTML = 1111 * iNow;
        oUl.appendChild(oLi);
    
    };

};

</script>
</head>
<body> <input type="button" value="添加" id="input1" /> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>

a:当点击创建添加的时候追加到ul的里,此时新创建的的li就具备事件啦。

 

 

如有错误,欢迎指正,谢谢~

posted @ 2016-08-02 00:18  小陈小陈  阅读(293)  评论(0编辑  收藏  举报