首頁 > web前端 > js教程 > Query中click(),bind(),live(),delegate()的區別_jquery

Query中click(),bind(),live(),delegate()的區別_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 17:14:14
原創
1328 人瀏覽過

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

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

複製代碼 程式碼如下:

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

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

程式碼如下:



程式碼如下:



程式碼如下:

var message = "left";
$("a").bind("click", function() {
   alert(message); $("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;});

這樣當我們左鍵點選時,輸出"left";當右鍵單擊時,輸出"right"。 可見,一般情況下我們使用click()方法就可以了,當需要處理上邊這種情況時,我們要使用bind()方法。 3.live()為所有符合的元素附加一個事件處理函數,即使這個元素是以後再加入進來的也有效。
.live").bind("click", function() {
   alert("success");
});

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

複製程式碼 程式碼如下:
$("
live
").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()方法,其中並沒有做非常詳細的解釋,僅望能對大家在具體使用時有所幫助。
相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
引入jQuery 文件
來自於 1970-01-01 08:00:00
0
0
0
jquery筆記哪裡有下?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎麼引入jquery
來自於 1970-01-01 08:00:00
0
0
0
php+jquery的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板