Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

使用Live方法

.live()

方法使用了事件委托的概念来实施其所谓的“魔法”。你调用

live()

方法的方式就像是调用

bind()

方法那样方便。然而在这表面之下，

.live()

方法与前者的实现方式大不相同。

 .live()

方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）
 ( "#members li a" & "click" ) */
$( "#members li a" ).live( "click", function( e ) {} );

.bind()这个例子与上面bind()方法的例子对比的话有一个优点在于它仅仅把事件处理函数附加到document元素一次，而不是很多次。这样不仅更快，而且还减少了性能的浪费。然而，使用这个方法也会带来很多问题，下面将一一列出。

优点:

所有的事件处理函数都只会被注册一次，而不是像

bind()

那样进行多次注册
将

bind()

方法升级到

live()

方法非常方便，你仅需要将”bind”替代为”live”就可以了
那些被动态添加到DOM的元素也将被神奇的匹配到，因为真实的事件信息是被注册到document元素上的
你可以在文档加载完之前连接事件处理函数，这样可以帮助你更好地利用你可能没有用的时间

缺点:

这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它
使用这个方法时链式操作没有得到正确的支持，可能会出现某些错误
所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
使用

event.stopPropogation() 

方法将会没用，因为事件总是已经被委托到了document元素上
因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。