Jquery的事件及事件绑定

项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,而在jquery中有以下四个函数可以对元素进行绑定事件的操作:bind(),live(),delegate(),on()。

bind/unbind方法

为每个匹配元素的特定事件绑定事件处理函数。

$(selector).bind(type,[data],fn)

参数解释:

type:必需;添加到元素的一个或多个事件,例如 click,dblclick等;  
    单事件处理:例如 $(selector).bind("click",data,fn);  
    多事件处理:  
            1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);  
            2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})  
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;  
              大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     
data:可选;需要传递的参数;  
function:必需;当绑定事件发生时,需要执行的函数;

代码示例:

$("a").unbind();
$("a").bind("click",function(){alert("ok");});

live/die方法

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

$(selector).live(type, [data], fn)

参数解释:

type:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
    单事件处理:例如 $(selector).live("click",data,function);
    多事件处理:
            1.利用空格分隔多事件,例如 $(selector).live("click dbclick 
            2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...}) 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
              大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;

代码示例:

$("a").die("click"); //移除click绑定的事件  
$("a").live("click",function(){alert("ok");});

注意:jquery1.9及以上版本已经移除live()方法,推荐使用on()方法来代替

delegate/undelegate方法

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

$(selector).delegate(childSelector,event,[data],function)

参数说明:

childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
    单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
    多事件处理:
            1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
            2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...}) 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
              大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;

代码示例:

$("#container a").undelegate();
// 绑定容器下面所有的a标签的点击事件
$("#container").delegate("a","click",function(){alert("ok");})

on/off方法

在选择元素上绑定一个或多个事件的事件处理函数。

$(selector).on(events,[childselector],[data],fn)

参数说明:

events:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
    单事件处理:例如 $(selector).on("click",childselector,data,function);
    多事件处理:
            1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
            2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector); 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
              大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;    
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;

代码示例:

// on方法可以替换上面的三种方法
// 1. 替换bind绑定事件,不指定childSelector子选择器即可
$("a").on("click",function(){alert("ok");}); 
// 2. 替换live动态绑定的事件,绑定container下面的a标签的点击事件
$("container").live("click",'a',function(){alert("ok");});
// 3. 替换delegate动态绑定事件,绑定container下面的a标签的点击事件
$("#container").on("click","a",function(){alert("ok");})

注意:on动态绑定事件的时候,需要绑定没有动态生成的父元素上面,从父元素来查找子元素从而实现事件的绑定效果,如果直接使用jquery获取的子元素来绑定事件不会有任何效果。

四种方法比较

.bind()是直接绑定在元素上,只能绑定静态元素的事件,无法对js/ajax生成的元素进行事件的绑定。
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制

1.7之前可以使用delegate()来绑定事件,1.7之后请使用on来替换这些方法!

参考

jQuery 参考手册 - 事件
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式