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()方法吧。