您的位置:首页 > Web前端 > JQuery

关于jquery中的bind()、live()、delegate()的区别分析浅析

2014-12-29 16:16 483 查看
近来在研究JS的时候,小码哥又一次看到jquery中常见的几种绑定事件的方法:bind(),live(),delegate()。因此,闲来无事,想把他们几个做一下系统的分析,一遍后面的码农们能够一起分享!
先说好,鄙人也算是JS的初学者,很复杂的模块啥的,也是略懂而已,要是有码神看到,可别Ma我哈!!
那好,下面就直接进入主题了~
首先,分别介绍一下这三个方法:
1、bind()——$(selector).bind(event,data,function);
event 为必需,规定添加到元素上的一个或多个事件,由空格分隔多个事件,必需是有效事件

data 可选,规定传递到函数的额外数据,一般用不到

function 必需,规定当事件发生时运行的函数。

实例:
$("button").bind("click",function(){
$("p"),slideToggle();//slideToggle()方法是鼠标点击切换

})

还可以对同一个元素添加多个事件:$(selector).bind(event:function,event:function,....);
$(document).ready(function(){
$("button").bind(click:function(){
$("p").slideToggle();

},
mouseover:function(){
$("body").css({'background','red';})

},
mouseout:function(){
$("body").css('background','#fff');

});
});
2、live()——$(selector).live(event,data,function);
event 为必需,规定添加到元素上的一个或多个事件,由空格分隔多个事件,必需是有效事件
data 可选,规定传递到函数的额外数据,一般用不到
function 必需,规定当事件发生时运行的函数。实例: $("button").live("click",function(){ $("p").slideToggle();
})
live()方法有一个好处就是可以为HTML还不存在(即由JS脚本临时创建的新元素上添加事件)
3、delegate()——$(selector).delegate(childSelector,event,data,function); childSelector 必需,规定要附加事件处理程序的一个或多个子元素。
event 必需,规定附加到元素上的一个或多个事件。
由空格分隔多个事件值,必需是有效事件。
data 可选,规定传递到函数的额外数据。
function 必需,规定当事件发生时运行的函数。
delegate()方法同样可以为HTML还不存在(即由JS脚本临时创建的新元素上添加事件)。

实例:
$('div').delegate('button','click',function(){
$("p").slideToggle();

})
下面就来分析一下他们的异同:
首先,单看简单的针对某个元素进行事件绑定,他们之间貌似没有多少区别,都可以实现简单的事件绑定,且他们都是遵循事件冒泡(事件传播)方式查询要绑定事件的元素。
但bind()方法,却不能像live()和delegate()方法那样,为未来(即由JS脚本新生成和创建的元素)添加事件绑定。bind()方法只能对HTML中已经存在的元素添加绑定事件。
live()方法有一个最大的缺点,就是它仅能针对直接的CSS选择器做操作,这使得它变得非常不灵活。

在live()和delegate()之间,唯一的差别就在于它们在对要绑定事件的元素的获取速度上有差异。在事件传播上,后者要比前者的速度更快一点,只因后者的限制条件更精准一些。这可以从它们的绑定事件的结构来看出来。
鉴于以上分析,我们更倾向于live()和delegate()方法。而这两者,有倾向与后者。
但,对于停止事件传播来说,bind()方法会高效而直接。因此,我们平时用来阻止事件传播时,会选择bind()方法:
$('a').bind('click',function(e){
e.preventDefault();

e.stopPropagation();

});
只因其他两种方法由于事件冒泡而耽误了时间。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery live() bind()