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 ) {} );