jQuery:click() bind() live() delegate()區別

來源:互聯網
上載者:User
click(),bind(),live()執行事件方法區別:
1.click()方法是我們經常使用的單擊事件方法:
$("a").click(function() {
alert("hello");
});

當點擊<a>時,輸出hello。
2.click()方法是bind()方法的一種簡單方法。在bind()中,jQuery所有JavaScript事件對象,比如focus,
mouseover, 和 resize,都是可以作為type參數傳遞進來的。例:

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參數傳遞到到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;
});

這樣當我們左鍵單擊<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");
});

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.