项目中经常会有利用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()绑定事件方式