jquery .bind() vs .live() vs .delegate() vs .on()

假设我们有这样一段html：

<ul class='bookList'>
    <li>book 1</li>
    <li>book 2</li>
</ul>
<button>add a li </button>

1: .bind()
.bind方法的用法是这样的：targetElment.bind('eventType', eventHandler)
所以假入我们要给<li>元素绑定一个click事件，那就这样写：

$(document).ready(function(){
    $('.bookList li').bind('click', function(event){
        $(this).addClass('red');
    })
    
    $('button').bind('click', function(event){
        $('.bookList').append('<li>book 3</li>');

    })
})

最开始只有两个<li>元素，点击<li>的时候会往当前被点击的<li>上面添加一个名为‘red’的class。通过点击‘add a li’这个button, 添加一个新的<li>元素。但是当我们点击新添加的<li>元素（也就是'book 3'）时，却没有把'red'这个class加给它。所以可以看到bind()有的缺点是：

1: 对于动态添加的元素不会绑定事件
2: 它会给每一个满足条件的dom元素都绑定这个eventHandler
3: 它会带来性能问题
4: 对应解绑方法为：.unbind()

2: .live()
.live方法的用法是这样的：targetElment.live('eventType', eventHandler)
live()的写法和bind是一样，但是它们的功能和实现原理却不一样，不同点有：

1: live()把eventHandler绑定在document上，而不是某个特定的元素节点上。它的原理是利用事件冒泡最终代理给最顶层的document。
2: 对于动态生成的元素也生效（因为eventHandler其实是绑定在document上的）。
3: jQuery 1.7之后live()就被废弃了，用.on()替代
4: 对应的解绑方法为 .die()

3: .delegate()
.delegate方法的用法是这样的：delegatedObject.delegate('targetElment','eventType', eventHandler)
比方说仍然针对我们开头的那段代码，我们把对<li>的点击事件，委托给它的父节点<ul>:

$('.bookList').delegate('.bookList li','click', function(event){
        $(this).addClass('red');
 })

.delegate()和live()都用了事件的委托，不用之处在于：

1: delegate()可以自己选择委托给特定的元素，而不是只能是document
2: jQuery 1.7之后.delegate()也被废弃了，要用.on()替换
3: 对应的解绑方法为 .undelegate()

4: .on()
.on()的语法：delegateObject.on('eventType', 'targetElement', eventHandler)
jQuery 1.7之后，上面的三个方法都被on取而代之，而用on的不同写法就可以达到跟它们相同的效果：

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

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

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