在jQuery的開發(fā)過程中，我們往往需要處理各種事件，例如click()，hover()等。在jQuery的API中，我們可以使用不同的方法來將這些事件綁定到特定的元素中。今天這篇文章中，我們將要介紹如何使用bind()，on()，live()和delegate()方法來綁定特定的事件，什么情況下使用，什么情況下不適用它們。希望能夠幫助大家更好的了解和使用jQuery的時(shí)間處理方法。

一、bind()方法

使用較早版本jQuery的教程或者應(yīng)用中，我們往往使用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" />');
});

如果你查看相關(guān)jQuery1.7.1最新文檔的話，大家應(yīng)該知道最新的jQuery中bind目前其實(shí)最后也是調(diào)用on()方法來實(shí)現(xiàn)的，所以呢，如果現(xiàn)在大家使用最新jQuery版本（目前為1.7.1）的話，盡量避免使用bind()方法。

如果大家點(diǎn)擊運(yùn)行這個(gè)示例肯定會(huì)發(fā)現(xiàn)，當(dāng)點(diǎn)擊第一個(gè)圖片時(shí)，會(huì)生成新的圖片，但是如果你點(diǎn)擊新生成的圖片，不會(huì)繼續(xù)執(zhí)行添加新圖片的操作。為什么會(huì)這樣呢？ 因?yàn)槭褂胋ind綁定的元素是頁面上所有存在的class="scv"的元素，新生成的元素添加到DOM，并沒有綁定我們添加的click方法。那么怎么讓新的圖片也可以綁定我們click方法呢。我們可以使用clone()方法，如下：

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

我們這里使用clone方法來生成一個(gè)新的圖片，并且添加到#container容器中。這里我們使用clone方法參數(shù)true，代表克隆的元素同時(shí)克隆綁定的方法。

二、live()方法

在老的jQuery版本中，我們有一個(gè)方法專門用來處理動(dòng)態(tài)生成的元素的事件綁定-live()，使用live()方法可以將方法綁定的效果應(yīng)用到已存在或者新創(chuàng)建的DOM元素。代碼如下：

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

live()調(diào)用過程如下：

我們首先將click方法綁定到了Document，然后，查找Document里是否有.scv這個(gè)元素。這個(gè)過程對(duì)于性能來說可能比較浪費(fèi)，所以我們可以使用如下帶參數(shù)方法優(yōu)化方式：

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

以上代碼中我們使用#container作為綁定的上下文，jQuery將會(huì)在#container這個(gè)元素中查詢.scv元素。

三、Delegate()方法

在最新的jQuery版本中，我們最好不要使用live()方法，因?yàn)樗呀?jīng)被放棄了，這里我們使用delegate方法來指定事件綁定的上下文，如下：

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

大家可以看到以上代碼中，我們首先設(shè)定了方法綁定的上下文-#container，然后，尋找class為.scv的元素，再綁定click方法。

注意：這里克隆后添加到的元素應(yīng)該是你定義的上下文，否則，新生成的圖片綁定不上click方法。

四、on()方法

.on( events [, selector ] [, data ], handler(eventObject) )

這是jQuery官方給出的Api，其實(shí)在最新版本的jQuery類庫中，所有以上方法在后面其實(shí)都是調(diào)用on()方法，所以，如果你開發(fā)最新版本的jQuery，完全可以使用on()方法來處理所有的事件綁定，避免過多的方法調(diào)用。如下：

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

});

如果要保證你動(dòng)態(tài)添加的東西可以綁定上handler，那么$("selector").on()中的selector應(yīng)該是更高的級(jí)別，父div，body或者document等。

五、總結(jié)

總的來說，最新的jQuery版本中，所有的方法基本最后都使用on()方法來處理，如果你針對(duì)新版本的jQuery做開發(fā)，大家可以考慮使用delegate()和on()方法處理事件綁定，雖然以前方法也可以用，但是大都都已經(jīng)退出歷史舞臺(tái)。

以上這篇淺談jQuery中事情的動(dòng)態(tài)綁定就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論