JS與Jquery的事件委托

參考：http://www.ituring.com.cn/article/467

概念：

　　什么是事件委托：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
　　舉個列子：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前台MM代為簽收。現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前台MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前台MM也會在收到寄給新員工的快遞后核實並代為簽收。

原理：

　　利用冒泡的原理，把事件加到父級上，觸發執行效果。

作用：

1.性能要好
2.針對新創建的元素，直接可以擁有事件

事件源 :

　　跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的

使用情景：

　　•為DOM中的很多元素綁定相同事件；
　　•為DOM中尚不存在的元素綁定事件；

 

JS的事件委托

 

Jquery的事件委托

$(function(){ 
    $('#ul1,#ul2').delegate('li','click',function(){ 
        if(!$(this).attr('s')) { 
        $(this).css('background','red'); 
        $(this).attr('s',true); 
        }else { 
            $(this).css('background','#fff'); 
            $(this).removeAttr('s'); 
        } 
    }) 
});

最新on()方法取替了delegate()方法

$(function(){ 
        $('#ul1,#ul2').on('click','li',function(){ 
                if(!$(this).attr('s')) { 
                $(this).css('background','red'); 
                $(this).attr('s',true); 
                }else { 
                        $(this).css('background','#fff'); 
                        $(this).removeAttr('s'); 
                } 
        }) 
});