Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）

jquery中注册的事件，注册事件很容易理解偏差，叫法不一样。我第一反应就是如何添加事件，使用onclick之类的，暂时不讨论js注册事件的方法。

也看到园内前辈写过相关的帖子，但不是很详细，我找到了一个还算比较详细，但不支持转载无奈收藏，又担心不经常看着个强迫症。就当copy吧。

jQuery中的bind(), live(), on(), delegate()

当我们试图绑定一些事件到DOM元素上的时候，我相信上面这4个方法是最常用的。而它们之间到底有什么不同呢？在什么场合下用什么方法是最有效的呢?

准备知识：

当我们在开始的时候，有些知识是必须具备的：

DOM树

下图仅仅是一个示例，这是一个在browser环境下的一棵模拟DOM树，在下面的代码中仅起到演示的作用：

/* The .live() method attaches the event handler to the root level
document along with the associated selector and event information
( "#members li a" & "click" ) */

$( "#members li a" ).live( "click", function( e ) {} );

上面的code在和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件，而只在document上绑定一次就可以了。尽管这个不是最快的方式，但是确实是最少浪费的。

优点：

这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定

那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上

你可以在document ready之前就可以绑定那些需要的事件

缺点：

从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。

Chaining没有被正确的支持

当使用event.stopPropagation()是没用的，因为都要到达document

因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时，会非常慢

当发生事件的元素在你的DOM树中很深的时候，会有performance问题

.Delegate()

.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
},

看一下，我们用如何用.on()来改写前面通过 .bind(), .live(), .delegate()所注册的事件：

/* The jQuery .bind(), .live(), and .delegate() methods are just one
line pass throughs to the new jQuery 1.8.2 .on() method */

// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

提供了一种统一绑定事件的方法

仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

不要再用.live()了，它已经不再被推荐了，而且还有许多问题

.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

我们可以用.on()来代替上述的3种方法

参考资料：

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/