js事件委托

浏览数：42 / 时间：2015年06月09日

事件委托其实就是利用冒泡，吧事件加到父级身上，从而出发执行。

事件委托有两个好处：1.提高性能。 2.后面动态添加的元素，也能有效果。具体可以看下面的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>事件委托</title>
<script type="text/javascript">
window.onload = function(){
    var oUl = document.getElementById(‘ul1‘);
    var aLi = oUl.getElementsByTagName(‘li‘);
    var oInput = document.getElementById(‘input1‘);

    /*for(var i=0;i<aLi.length;i++){
        aLi[i].onmouseover = function(){
            this.style.background = ‘red‘;
        }

        aLi[i].onmouseout = function(){
            this.style.background = ‘‘;
        }
    }*/
    /*event对象：有一个属性： 事件源，不管在任何事件中，就算是冒泡到父级的，事件源始终都是你操作的那个元素*/
    //兼容：ie:window.event.srcElement  标准下:event.target
    //nodeName:找到当前元素的标签名
    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(){
        var oLi = document.createElement(‘li‘);
        oLi.innerHTML = ‘zwl‘;
        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>