jQuery 事件委託

相關文章：事件委託的概念和作用

• 1.用on方法,代碼如下：

$(function(){
    $("ul").on("click","li",function(event){
        var target = $(event.target);
        target.css("background-color","red");
    })
})

• 2.用delegate（）方法，代碼如下：

$(function(){
    $("ul").delegate("li","click",function(event){
        var target = $(event.target);
        target.css("background-color","red");
    })
})

on()方法和delegate()方法對於事件委託的寫法很像。並且執行事件委託的時候只有子元素li會觸發事件，而代爲執行的父元素ul不會觸發事件，所以我們不需要盤判斷觸發事件的元素節點名，這一點明顯優於原生的JavaScript。

• 3.用bind()方法，代碼如下：

$(function(){
    $("ul").bind("click","li",function(event){
        var target = $(event.target);
        if(target.prop("nodeName")=="LI"){
        target.css("background-color","red");}
    })
})

bind()方法同原生的JavaScript實現方法一樣，當父元素代子元素執行事件時，父元素也會觸發事件，所以我們需要判斷一下觸發事件的元素名。此外，用bind()方法給元素綁定事件的時候要注意，它只能給已經存在DOM元素添加事件，不能給動態添加的DOM。

如果要頻繁地添加DOM元素，並且給新添加的DOM元素綁定事件的話，用live(),delegate(),on()等方法。鑑於jQuery從1.7之後就不推薦live()和delegate()方法了，所以大家還是使用on()方法吧。