Query中click(),bind(),live(),delegate()的區(qū)別
更新時間：2013年11月19日 09:11:46 作者：
這篇文章主要介紹了Query中click(),bind(),live(),delegate()之間的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助
click()，bind()，live()都是執(zhí)行事件時使用的方法，他們之前是有一些區(qū)別的，我們在使用這些方法時應(yīng)該根據(jù)需要進行選擇。
1.click()方法是我們經(jīng)常使用的單擊事件方法：
復(fù)制代碼 代碼如下:
$("a").click(function(){
alert("hello");
});
當(dāng)點擊<a>時，輸出hello。
2.click()方法是bind()方法的一種簡單方法。在bind()中，jQuery所有JavaScript事件對象，比如focus, mouseover, 和 resize，都是可以作為type參數(shù)傳遞進來的。我們直接看看jQuery文檔中的一個例子：
復(fù)制代碼 代碼如下:
var message = "left";
$("a").bind("click", function() {
alert(message);
return false;
});var message = "right";
$("a").bind("contextmenu", function() {
alert(message);
return false;
});
上邊代碼中，無論是左鍵單擊還是右鍵單擊<a>輸出總是"right"。為了解決這個問題，我們可以將message作為data參數(shù)傳遞到到bind()方法中，如下：
復(fù)制代碼 代碼如下:
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});var
message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
這樣當(dāng)我們左鍵單擊<a>時，輸出"left"；當(dāng)右鍵單擊<a>時，輸出"right"。
可見，一般情況下我們使用click()方法就可以了，當(dāng)需要處理上邊這種情況時，我們要使用bind()方法。
3.live()給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的也有效。如下：
復(fù)制代碼 代碼如下:
$("div.live").bind("click", function() {
alert("success");
});
此時，當(dāng)點擊class為live的div時，輸出"success"。此時如果有一個新的元素添加了進來，如下：
復(fù)制代碼 代碼如下:
$("<div class="live" href="#">live</div>").appendTo("body");
這時，當(dāng)使用上邊方法點擊class為live的a標(biāo)簽時，不會執(zhí)行。原因在于，這個元素是在調(diào)用bind()之后添加的，而使用live()方法使得在后邊添加的元素也能夠執(zhí)行相應(yīng)的事件，如下：
復(fù)制代碼 代碼如下:
$("div.live").live("click", function() {
alert("success");
});
這樣，當(dāng)我們單擊class為live的a標(biāo)簽時，如果此a標(biāo)簽是后邊添加的，也能照常輸出"success"。至于原因，在這里不做具體的說明，本篇主要比較幾種方法的區(qū)別。
最后，看看delegate()方法，這個方法到目前為止我自己還沒有使用過，應(yīng)該是在1.4.2中才有的。
live()方法的一個不足在于它不支持鏈?zhǔn)綄懛ǎ?BR>
復(fù)制代碼 代碼如下:
$("#test").children("a").live("mouseover", function() {
alert("hello");
});
上邊這種寫法并不會輸出，我們使用delegate()可以寫為：
復(fù)制代碼 代碼如下:
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});
這樣就可以正常的輸出我們想要的結(jié)果了。本篇總結(jié)了click()、bind()、live()和delegate()方法，其中并沒有做非常詳細(xì)的解釋，僅望能對大家在具體使用時有所幫助。
您可能感興趣的文章:
相關(guān)文章
easyui下拉框動態(tài)級聯(lián)加載的示例代碼
本篇文章主要介紹了easyui下拉框動態(tài)級聯(lián)加載的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要給大家分享了一段基于jquery實現(xiàn)等比縮放圖片的代碼，非常的實用，這里推薦給大家2014-12-12
今天給大家推薦一款不一樣的jQuery類似瀑布流插件，使文字也能實現(xiàn)瀑布流效果，有需要的小伙伴可要好好看仔細(xì)了。2014-11-11
這篇文章主要介紹了jQuery實現(xiàn)的簡單日歷組件定義與用法,結(jié)合實例形式詳細(xì)分析了基于jQuery擴展實現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章介紹了jquery利用ajax調(diào)用后臺方法實例，有需要的朋友可以參考一下2013-08-08
本文主要對jQuery的extend方法的用法做了簡要闡述，具有一定的參考價值，需要的朋友可以參考借鑒2016-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery自定義多選下拉框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
如何快速解決JS或Jquery ajax異步跨域的問題呢？下面小編就為大家分享一篇快速解決Jquery ajax異步跨域問題的方法，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
用Jquery去操作HTML元素很方便，能夠靈活自如的去查找。其實CSS也可以靈活方便的去查找篩選，以下用到的一些，整理了一下，還有很多有趣的用法，后續(xù)會繼續(xù)添加。2011-07-07
本文詳細(xì)講解了Jquery回調(diào)對象與延遲對象的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05