13518219792
近来在研究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();
});
只因其他两种方法由于事件冒泡而耽误了时间。
