Javascript之事件委托

JS之事件委托

 　　利用冒泡原理,把事件加到父级或者更高，触发执行效果

好处：

1、  提高性能

<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>
<body>
    <ul id = "ul1">
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
</body>

如上所示：方法一和二都可以实现相同的效果，方法二利用冒泡的原理委托给父级。但是方法二循环减少，效率更高。

2、  新添加的元素，还会有之前的事件。如果添加在父级元素，动态增加子元素的时候，就不必新添加事件

　　event对象里有个：事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。

　　ie下通过 window.event.srcElement 获得

　　标准下：event.target 获得

　　nodeName:找到元素的标签名

<script>

    window.onload = function(){
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName("li");
        var oInput = document.getElementById("input1");
        var iNow=3;
        oUl.onmouseover = function(ev){
            var ev = ev||window.event;
            var target = ev.target||ev.srcElement;
            
             if(target.nodeName== "LI"){
                
                target.style.background = "red";
             }
        };
            
        oUl.onmouseout = function(ev){
            var ev = ev||window.event;
            var target = ev.target||ev.srcElement;
            target.style.background = "";
        }
        oInput.onclick=function(){
                iNow++;
                var oli=document.createElement("li");
                oli.innerHTML = 1111*iNow;
                oUl.appendChild(oli); 

        }
    }
</script>
<body>
<input type="button" value="ADD" id="input1" />
    <ul id = "ul1">
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
</body>

 

posted @ 2015-07-30 15:47  TodayCC  阅读(92)  评论(0)    收藏  举报