jQuery的事件處理方法介紹 - bind()，live()，delegate()，on()

在 jQuery的開發過程當中，咱們每每須要處理各類事件，例如，click()，hover()等。在jQuery的API中，咱們可使用不一樣的方法來將 這些事件綁定到特定的元素中。今天這篇文章中，咱們將要介紹如何使用bind()，on()，live()和delegate()方法來綁定特定的事件， 什麼狀況下使用，什麼狀況下不適用它們。但願可以幫助你們更好的瞭解和使用jQuery的時間處理方法。若是你喜歡咱們的文章，請給咱們留言，謝謝！

bind()方法

使用較早版本jQuery的教程或者應用中，咱們每每使用bind()方法來將事件綁定到特定的元素上，以下：

<section id="container">
	<img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>

$('.scv').bind('click', function(){
    $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

若是你查看相關jQuery1.7.1最新文檔的話，你們應該知道最新的jQuery中bind目前其實最後也是調用on()方法來實現的，因此呢，若是如今你們使用最新jQuery版本（目前爲1.7.1）的話，儘可能避免使用bind()方法。

在線演示

如 果你們點擊運行上面在線演示的話，確定會發現，當點擊第一個圖片時，會生成新的圖片，可是若是你點擊新生成的圖片，不會繼續執行添加新圖片的操做。爲何 會這樣呢？ 由於使用bind綁定的元素是頁面上全部存在的class="scv"的元素，新生成的元素添加到DOM，並無綁定咱們添加的click方法。那麼怎麼 讓新的圖片也能夠綁定咱們click方法呢。咱們可使用clone()方法，以下：

$('.scv').bind('click', function(){
	$(this).clone(true).appendTo('#container');
});

咱們這裏使用clone方法來生成一個新的圖片，而且添加到#container容器中。這裏咱們使用clone方法參數true，表明克隆的元素同時克隆綁定的方法。這裏咱們運行在線演示看看效果，以下：

在線演示

你們能夠看到如今咱們點擊新添加的圖片，也能夠生成新的圖片了。

live()方法

在老的jQuery版本中，咱們有一個方法專門用來處理動態生成的元素的事件綁定 - live()，使用live()方法能夠將方法綁定的效果應用到已存在或者新建立的DOM元素。代碼以下：

$('.scv').live('click', function(){
	$(this).clone().appendTo('#container');
});

在線演示

若是你們運行演示，能夠看到以上代碼一樣也能夠達到效果。

live()調用過程以下：

咱們首先將click方法綁定到了Document，而後，查找Document裏是否有.scv這個元素。 這個過程對於性能來講可能比較浪費，因此咱們可使用以下帶參數方法優化方式：

$('.scv', '#container').live('click', function(){
	$(this).clone().appendTo('#container');
});

以上代碼中咱們使用#container做爲綁定的上下文，jQuery將會在#container這個元素中查詢.scv元素。代碼以下：

在線演示

Delegate方法

在最新的jQuery版本中，咱們最好不要使用live()方法，由於它已經被放棄了，這裏咱們使用delegate方法來指定事件綁定的上下文，以下：

$('#container').delegate('.scv','click', function(){
    $(this).clone().appendTo('#container');
});

你們能夠看到以上代碼中，咱們首先設定了方法綁定的上下文 - #container，而後，尋找class爲.scv的元素，再綁定click方法。

在線演示

注意：這裏克隆後添加到的元素應該是你定義的上下文，不然，新生成的圖片綁定不上click方法。

on()方法

其實在最新版本的jQuery類庫中，全部以上方法在後面其實都是調用on()方法，因此，若是你開發最新版本的jQuery，徹底可使用on()方法來處理全部的事件綁定，避免過多的方法調用。以下：

$('.scv').on('click', function(){
    $(this).clone(true).appendTo('#container');
});

在線演示

代碼和bind方法同樣。

總結

總 的來講，最新的jQuery版本中，全部的方法基本最後都使用on()方法來處理，若是你針對新版本的jQuery作開發，你們能夠考慮使用 delegate()和on()方法處理事件綁定，雖然之前方法也能夠用，可是大都都已經退出歷史舞臺。