分類  >  Web前端 >

jQuery步驟區別(四)click() bind() live() delegate()區別

tags:    時間:2013-12-09 23:35:53
jQuery方法區別(四)click() bind() live() delegate()區別

http://www.jquery001.com/click()-bind()-live()-delegate().html

click(),bind(),live()都是執行事件時使用的方法,他們之前是有一些區別的,我們在使用這些方法時應該根據需要進行選擇。

1.click()方法是我們經常使用的單擊事件方法:

$("a").click(function(){    alert("hello");});

當點擊<a>時,輸出hello。

2.click()方法是bind()方法的一種簡單方法。在bind()中,jQuery所有JavaScript事件對象,比如focus, mouseover, 和 resize,都是可以作為type參數傳遞進來的。我們直接看看jQuery文檔中的一個例子:

var message ="left"; $("a").bind("click",function(){    alert(message);returnfalse;});var message ="right"; $("a").bind("contextmenu",function(){    alert(message);returnfalse;});

上邊代碼中,無論是左鍵單擊還是右鍵單擊<a>輸出總是"right"。為了解決這個問題,我們可以將message作為data參數傳遞到到bind()方法中,如下:

var message ="left"; $("a").bind("click",{ msg: message },function(e){    alert(e.data.msg);returnfalse;});var message ="right"; $("a").bind("contextmenu",{ msg: message },function(e){    alert(e.data.msg);returnfalse;});

這樣當我們左鍵單擊<a>時,輸出"left";當右鍵單擊<a>時,輸出"right"。

可見,一般情況下我們使用click()方法就可以了,當需要處理上邊這種情況時,我們要使用bind()方法。

3.live()給所有匹配的元素附加一個事件處理函數,即使這個元素是以後再添加進來的也有效。如下:

$("div.live").bind("click",function(){    alert("success");});

此時,當點擊class為live的div時,輸出"success"。此時如果有一個新的元素添加了進來,如下:

$("<div class="live" href="#">live</div>").appendTo("body");

這時,當使用上邊方法點擊class為live的a標籤時,不會執行。原因在於,這個元素是在調用bind()之後添加的,而使用live()方法使得在後邊添加的元素也能夠執行相應的事件,如下:

$("div.live").live("click",function(){    alert("success");});

這樣,當我們單擊class為live的a標籤時,如果此a標籤是後邊添加的,也能照常輸出"success"。至於原因,在這裡不做具體的說明,本篇主要比較幾種方法的區別。

最後,看看delegate()方法,這個方法到目前為止我自己還沒有使用過,應該是在1.4.2中才有的。

live()方法的一個不足在於它不支持鏈式寫法:

$("#test").children("a").live("mouseover",function(){     alert("hello");});

上邊這種寫法並不會輸出,我們使用delegate()可以寫為:

$("#test").delegate("a","mouseover",function(){     alert("hello");});

這樣就可以正常的輸出我們想要的結果了。本篇總結了click()、bind()、live()和delegate()方法,其中並沒有做非常詳細的解釋,僅望能對大家在具體使用時有所幫助。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網