Query中click(),bind(),live(),delegate()的區(qū)別
click(),bind(),live()都是執(zhí)行事件時使用的方法,他們之前是有一些區(qū)別的,我們在使用這些方法時應(yīng)該根據(jù)需要進(jìn)行選擇。
1.click()方法是我們經(jīng)常使用的單擊事件方法:
$("a").click(function(){
alert("hello");
});
當(dāng)點擊<a>時,輸出hello。
2.click()方法是bind()方法的一種簡單方法。在bind()中,jQuery所有JavaScript事件對象,比如focus, mouseover, 和 resize,都是可以作為type參數(shù)傳遞進(jìn)來的。我們直接看看jQuery文檔中的一個例子:
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()方法中,如下:
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ù),即使這個元素是以后再添加進(jìn)來的也有效。如下:
$("div.live").bind("click", function() {
alert("success");
});
此時,當(dāng)點擊class為live的div時,輸出"success"。此時如果有一個新的元素添加了進(jìn)來,如下:
$("<div class="live" href="#">live</div>").appendTo("body");
這時,當(dāng)使用上邊方法點擊class為live的a標(biāo)簽時,不會執(zhí)行。原因在于,這個元素是在調(diào)用bind()之后添加的,而使用live()方法使得在后邊添加的元素也能夠執(zhí)行相應(yīng)的事件,如下:
$("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>
$("#test").children("a").live("mouseover", function() {
alert("hello");
});
上邊這種寫法并不會輸出,我們使用delegate()可以寫為:
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});
這樣就可以正常的輸出我們想要的結(jié)果了。本篇總結(jié)了click()、bind()、live()和delegate()方法,其中并沒有做非常詳細(xì)的解釋,僅望能對大家在具體使用時有所幫助。
相關(guān)文章
jquery實現(xiàn)表格中點擊相應(yīng)行變色功能效果【實例代碼】
下面小編就為大家?guī)硪黄猨query實現(xiàn)表格中點擊相應(yīng)行變色功能效果【實例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
寫網(wǎng)頁的時候,腳本循環(huán)的時候有很多時候都會循環(huán)出來同id的網(wǎng)頁元素,下面貼出來代碼,如何利用jQuery對這些元素進(jìn)行逐一遍歷并可響應(yīng)消息2012-06-06jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例
這篇文章介紹了jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例,有需要的朋友可以參考一下2013-08-08jQuery模擬下拉框選擇對應(yīng)菜單的內(nèi)容
這篇文章主要介紹了jQuery模擬下拉框選擇對應(yīng)菜單的內(nèi)容,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03jquery.blockUI.js上傳滾動等待效果實現(xiàn)思路及代碼
上傳滾動等待效果想必大家在很多場合都有見過吧,本文將介紹jquery.blockUI.js實現(xiàn)上傳滾動等待效果,感興趣的你可不要錯過了哈,希望可以幫助到你2013-03-03使用jQuery的ajax功能實現(xiàn)的RSS Reader 代碼
Rss閱讀器挺不錯的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關(guān)注的信息那將會減少大家很多的打開瀏覽器和輸入網(wǎng)址的時間。2009-09-09