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'); 
                } 
        }) 
});