JS事件委托

JS事件委托

原創

2020-02-20 16:54

事件委托：

1、什么是事件委托：什么是事件呢？onclick,onmouseover,onmouseout,onfocus等就是事件什么是委托呢？就是自己做的事情委托给别人来做，也就是本来事件时加在自己身上，你却把事件加在别人身上，来解决这个事件

优点一：提高性能：

Demo1:

给每个li 绑定了一个鼠标经过事件

 window.οnlοad=function(){
        var oDemo  = document.getElementById('ul');
        var aLi = oDemo.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="";
            }
        }

    }

上面案例反应一个问题，当我们在开发的时候for循环多个鼠标经过li出现的事件，会影响性能

下面我们就讲如何使用事件委托来解决问题：

注意：
     这里涉及到事件源： 事件源是event对象下的，不管在那个事件中，只要你操作的那个元素就是事件源；
     IE : window.event.srcElement;
     标准下 : event.target;
     nodeName: 元素的标签名;

oDemo.οnmοuseοver=function(ev){
            var oEv = ev || window.event;
            var target = oEv.target || oEv.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background="red";
            }
}
oDemo.οnmοuseοut=function(ev){
            var oEv = ev || window.event;
            var target = oEv.target || oEv.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<button id="btn1">添加</button>
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>

window.οnlοad=function(){
        var oDemo  = document.getElementById('ul');
        var aLi = oDemo.getElementsByTagName('li');
        var oBtn = document.getElementById('btn1');
        var iNow=5;

        oDemo.οnmοuseοver=function(ev){
            var oEv = ev || window.event;
            var target = oEv.target || oEv.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background="red";
            }
        }
        oDemo.οnmοuseοut=function(ev){
            var oEv = ev || window.event;
            var target = oEv.target || oEv.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background="";
            }
        }
        //新添加的元素 还有事件
        oBtn.οnclick=function(){
            iNow++;
            var oLi = document.createElement('li');
            oLi.innerHTML=1 * iNow;
            oDemo.appendChild(oLi);
        }
    }
</script>
</body>
</html>