事件委托的小应用

事件委托

事件委托
利用冒泡原理，把事件加到父级元素上，触发事件的执行效果

优点：

• 节省内存开销

• 对于追加的节点同样有效

举了例子，创建一堆无序列表，我们希望当鼠标滑过的时，改变当前 <li> 的背景颜色

<ul id="ulBox">
    <li>Event commission</li>
    <li>mountain</li>
    <li>leopard</li>
    <li>tiger</li>
    <li>Stalin</li>
    <li>Hitler</li>
    <li>Barton</li>
</ul>

    var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var l = li.length;
    for(i=0;i<l;i++){
        li[i].onmouseover=function(){
            this.style.background="red";
        }
        li[i].onmouseout=fucntion(){
            this.style.background="";
        }
    }

这样，我们已经为每个 <li> 都添加了事件，但是，这个事件循环了 i 次，比较消耗性能。

用事件代理也可以实现同样的效果

    var ulBox = document.getElementById("ulBox");
    ulBox.onmouseover = function(e){
        var hover = e||window.event;//获取事件对象，
        var nodeLi = hover.target||hover.srcElement;//获取事件对象的具体子元素
        nodeLi.style.background="red";
    }
    
    ulBox.onmouseout = function(e){
        var hover = e||window.event;//获取事件对象，
        var nodeLi = hover.target||hover.srcElement;//获取事件对象的具体子元素
        nodeLi.style.background="red";
    }

如果我们要追加几个 <li> ，使用一个<button>按钮来添加元素

<input type="button" value="添加" id="btn">
<ul id="ulBox">
    <li>Event commission</li>
    <li>mountain</li>
    <li>leopard</li>
    <li>tiger</li>
    <li>Stalin</li>
    <li>Hitler</li>
    <li>Barton</li>
</ul>

如果使用常规方法

    var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var btn = document.getElementById("btn");
    var l = li.length;
    for(i=0;i<l;i++){
        li[i].onmouseover=function(){
            this.style.background="red";
        }
        li[i].onmouseout=fucntion(){
            this.style.background="";
        }
        btn.onclick=function(){
            var oLi = document.createElement("li");
            oLi.innerHTML="Low";
            ulBox.appendChild(oLi);
        }
    }

新加入的 <li> 并不能响应滑过变色的事件，因为在添加完元素之前，循环已经执行完毕。

使用事件委托，即可以直接响应事件效果

        ulBox.onmouseover=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="red";
        }
        ulBox.onmouseout=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="";
        }
       
        btn.onclick=function(){
            var oLi = document.createElement("li");
            oLi.innerHTML="Low";
            ulBox.appendChild(oLi);
        }