js事件委托

什么是事件委托：通俗的讲，onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处1，提高性能。

先看一个例子：需要触发每个li来改变他们的背景颜色。

<ul id="ul">
    <li>aaaaaaaa</li>
    <li>bbbbbbb</li>
    <li>ccccccccc</li>
</ul>
 
window.onload = function(){
    var oUl = document.getElementById("ul");
    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 = "";
        }
    }
}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

    /*
     这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
     ie：window.event.srcElement
     标准下:event.target
     nodeName:找到元素的标签名
     */
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "";
        }
    }
}

好处2，新添加的元素还会有之前的事件。

基于上诉代码，现在我们要做动态的添加li。点击button动态添加li

如：

<input type="button" id="btn" />
<ul id="ul">
    <li>aaaaaaaa</li>
    <li>bbbbbbbb</li>
    <li>cccccccc</li>
</ul>
 
 /* 不用事件委托我们会这样做 */
window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    var oBtn = document.getElementById("btn");
    var iNow = 4;
    for(var i=0; i<aLi.length; i++){
        aLi[i].onmouseover = function(){
            this.style.background = "red";
        }
        aLi[i].onmouseout = function(){
            this.style.background = "";
        }
    }

    oBtn.onclick = function(){
        iNow ++;
        var oLi = document.createElement("li");
        oLi.innerHTML = 1111 *iNow;
        oUl.appendChild(oLi);
    }
 
}

这样做我们可以看到点击按钮新加的li上面鼠标移入没有改变他们的背景颜色

因为点击添加的时候for循环已经执行完毕,所以没有绑定到相应的事件

那么我们用事件委托的方式来做， html不变

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    var oBtn = document.getElementById("btn");
    var iNow = 4;

    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "";
        }
    }
    oBtn.onclick = function(){
        iNow ++;
        var oLi = document.createElement("li");
        oLi.innerHTML = 1111 *iNow;
        oUl.appendChild(oLi);
    }
}

以上为DOM0级事件绑定的委托方式，那么DOM2级事件同样也可以做到，在此不做赘述。如果不懂DOM2级事件的同学可以移步到我的另外一篇博客 js事件处理、事件对象

很自然的可以联想到jQuery的on函数，on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

用法一：

jQueryObject.on( events [, selector ] [, data ], handler )

用法二：

jQueryObject.on( eventsMap [, selector ] [, data ] )

events：String类型，一个或多个用空格分隔的事件类型，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap：Object类型，一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector：可选/String类型，一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data：可选/任意类型，触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler：Function类型，指定的事件处理函数。

那么现在看看，上述例子在jquery中的使用

 
<ul>
    <li>aaaaaaaa</li>
    <li>bbbbbbbb</li>
    <li>cccccccc</li>
</ul>
<button>add li</button>
<script>
    $('button').click(function () {
        $('ul').append('<li>new li</li>');
    });
    $("ul").on('click','li',function () {
        $(this).css('color','red');
    })
</script>