背(chui)景(shui)

用了那么久 jQ，也用过他提供的几种事件绑定的方法，包括 bind、live、delegate 和 on。港真，一开始用的时候还真没有好好区分，各种混用。现在也该藉由当前的经验，对这些方法好好总结一下，加深理解。
（后记：后面三种方法好像应该叫事件委托，因为都是通过将事件处理器绑定到某个祖先元素，让其来代替处理事件，而元素本身不处理）

bind

$( selector ).bind( event, handler )

bind 方法，就是典型的事件绑定了。以 $(‘a’).bind(‘click’, handler) 为栗子，bind 方法是通过遍历找出所有满足
选择器的元素，来给它们一一绑定。

live

$( selector [,context]).live( event, handler )

live 方法，是将事件委托到 document 元素，即事件的处理器 handler 绑定到 $(document) 元素上。当某个事件触发时，live 方法会根据事件类型和选择器对具体元素进行匹配，然后处理事件。
当然，也可以自己手动设置上下文，这样就不用绑定到 $(document)，如：$( ‘li’,$(‘#container’)[0] ).live(‘click’,function(event){});
使用 live 方法绑定到 document 时有个缺点，就是中间如果隔着较多层元素的话，在冒泡的过程中会影响性能。
（不过，从 v1.9+ 开始，就不再支持这个方法了）

delegate

$( parent-selector ).delegate( selector, event, handler )

delegate 方法，是通过将 handler 直接绑定到某个祖父元素，在事件触发时，通过找到符合参数中指定选择器的子元素进行处理。

bind 和 live/delegate 的选择

基于这三个方法的特点，可以归纳下列三种情况：

为 DOM 中的很多不同元素绑定相同的事件，选后两者而不选 bind
为不存在于 DOM 的元素绑定事件，同样不选 bind
结构复杂的 DOM 中，使用 delegate

on

$([parent-]selector).on( events [, selector] [, data ], handler(event) )

v1.7+ 开始，逐渐取代了 live、delegate 和 bind。
如果用特定元素绑定事件，如：

$('button').on( 'click', function(){} )

这种形式和 bind 绑定方式一样。因此，这种绑定方法不宜使用于尚未存在的元素。
因此，指定 selector 参数，就是事件委托；否则，就是常规绑定。
其实也就是说，以后只用 on/off 进行绑定/解绑事件就够了。

P.s.

几种绑定方法相应的解绑方法
bind —— unbind
live —— die
delegate —— undelegate
on —— off

Reference

http://www.cnblogs.com/rabbit2012/archive/2013/03/15/2961881.html