delegate()函式用於為指定元素的一個或多個事件繫結事件處理函式。

此外，你還可以額外傳遞給事件處理函式一些所需的資料。

即使是執行delegate()函式之後新新增的元素，只要它符合條件，繫結的事件處理函式仍然對其有效。

此外，該函式可以為同一元素、同一事件型別繫結多個事件處理函式。觸發事件時，jQuery會按照繫結的先後順序依次執行繫結的事件處理函式。

從jQuery 1.7開始，請優先使用事件函式on()替代該函式。

該函式屬於jQuery物件(例項)。

語法

jQuery 1.4.2 新增該函式。其主要有以下兩種形式的用法：

用法一：

jQueryObject.delegate( selector , events [, data ], handler )

用法二：jQuery 1.4.3 新增支援該用法。

jQueryObject.delegate( selector, eventsMap )

引數

引數

描述

selector

String型別一個jQuery選擇器，用於指定哪些後代元素可以觸發繫結的事件。如果該引數為null或被省略，則表示當前元素自身繫結事件(實際觸發者也可能是後代元素，只要事件流能到達當前元素即可)。

events

String型別一個或多個用空格分隔的事件型別和可選的名稱空間，例如"click"、"focus click"、"keydown.myPlugin"。

data

可選/任意型別觸發事件時，需要透過event.data傳遞給事件處理函式的任意資料。

handler

Functidelegate型別指定的事件處理函式。

eventsMap

Object型別一個Object物件，其每個屬性對應事件型別和可選的名稱空間(引數events)，屬性值對應繫結的事件處理函式(引數handler)。

關於引數events中可選的名稱空間，請參考最下面的示例程式碼。

關於引數selector，你可以簡單地理解為：如果該引數等於null或被省略，則為當前匹配元素繫結事件；否則就是為當前匹配元素的後代元素中符合selector選擇器的元素繫結事件。

引數handler中的this指向當前匹配元素的後代元素中觸發該事件的DOM元素。如果引數selector等於null或被省略，則this指向當前匹配元素(也就是該元素)。

delegate()還會為handler傳入一個引數：表示當前事件的Event物件。

引數handler的返回值與DOM原生事件的處理函式返回值作用一致。例如"submit"(表單提交)事件的事件處理函式返回false，可以阻止表單的提交。

如果事件處理函式handler僅僅只用於返回false值，可以直接將handler設為false。

返回值

delegate()函式的返回值為jQuery型別，返回當前jQuery物件本身。

重要說明：delegate()函式並不是為當前jQuery物件匹配的元素繫結事件處理函式，而是為它們的後

代元素中符合選擇器selector引數的元素繫結事件處理函式。delegate()函式並不是直接為這些後代元素挨個繫結事件，而是"委託"給當前

jQuery物件的匹配元素來處理。由於DOM

2級的事件流機制，當後代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會

判斷是哪個後代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行繫結的事件處理函式。

示例&說明

// 這裡的選擇器selector用於指定可以觸發事件的元素

// 這裡的選擇器ancestor應是selector的祖輩元素，selector觸發的事件可以被其祖輩元素在事件流中捕獲，從而以"代理"的形式觸發事件。

// jQuery 1.0+ (1.4.3+支援引數data)

$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支援引數data)

$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支援引數data)

$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+

$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+

$("ancestor").on( "click", "selector" [, data ], handler );

請參考下面這段初始HTML程式碼：

<div>

<p><span>CodePlayer</span></p>

<p><span>專注於程式設計開發技術分享</span></p>

<em>http://www.365mini.com</em>

</div>

<p>Google</p>

// 為div中的所有p元素繫結click事件處理程式

// 只有n2、n3可以觸發該事件

$("div").delegate("p", "click", function(){

alert( $(this).text() );

});

執行程式碼(其他程式碼請自行復制到演示頁面執行)

如果要繫結所有的<p>元素，你可以編寫如下jQuery程式碼：

//為所有p元素繫結click事件處理程式(body內的所有p元素，就包含所有的p元素)

//n2、n3、n5均可觸發該事件

$("body").delegate("p", "click", function(event){

alert( $(this).text() );

});

此外，我們還可以同時繫結多個事件，併為事件處理函式傳遞一些附加的資料，我們可以透過jQuery為事件處理函式傳入的引數event(Event事件物件)來進行處理：

var data = { id: 5, name: "李四" };

//為n5繫結mouseenter mouseleave兩個事件，併為其傳入附加資料data

//附加資料可以是任意型別

$("body").delegate("#n5", "mouseenter mouseleave", data, function(event){

var $me = $(this);

var options = event.data; // 這就是傳入的附加資料

if( event.type == "mouseenter"){

$me.html( "你好，" + options.name + "!");

}else if(event.type == "mouseleave" ){

$me.html( "再見，" + options.name + "!");

}

} );

此外，即使符合條件的元素是delegate()函式執行後新新增，繫結事件對其依然有效。同樣以初始HTML程式碼為例，我們可以編寫如下jQuery程式碼：

//為div中的所有p元素繫結click事件處理程式

//只有n2、n3可以觸發該事件

$("div").delegate("p", "click", function(event){

alert( $(this).text() );

});

//後新增的n6也可以觸發上述click事件，因為它也是div中的p元素

$("#n1").append("<p>上述繫結的click事件對此元素也生效!</p>");

引數events還支援為事件型別附加額外的名稱空間。當為同一元素繫結多個相同型別的事件處理函式時。使用名稱空間，可以在觸發事件、移除事件時限定觸發或移除的範圍。

function clickHandler(event){

alert( "觸發時的名稱空間:[" + event.namespace + "]");

}

var $p = $("p");

// A：為所有p元素繫結click事件，定義在foo和bar兩個名稱空間下

$("body").delegate( "p", "click.foo.bar", clickHandler );

// B：為所有p元素繫結click事件，定義在test名稱空間下

$("body").delegate( "p", "click.test", clickHandler );

var $n2 = $("#n2");

// 觸發所有click事件

$n2.trigger("click"); // 觸發A和B (event.namespace = "")

// 觸發定義在foo名稱空間下的click事件

$n2.trigger("click.foo"); // 觸發A (event.namespace = "foo")

// 觸發定義在bar名稱空間下的click事件

$n2.trigger("click.bar"); // 觸發A (event.namespace = "bar")

// 觸發同時定義在foo和bar兩個名稱空間下的click事件

$n2.trigger("click.foo.bar"); // 觸發A (event.namespace = "bar.foo")

// 觸發定義在test名稱空間下的click事件

$n2.trigger("click.test"); // 觸發B (event.namespace = "test")

// 移除所有p元素定義在foo名稱空間下的click事件處理函式

$p.undelegate( "click.foo" ); // 移除A

delegate()函式的引數eventsMap是一個物件，可以"屬性-值"的方式指定多個"事件型別-處理函式"。對應的示例程式碼如下：

var events = {

"mouseenter": function(event){

$(this).html( "你好!");

},

"mouseleave": function(event){

$(this).html( "再見!");

}

};

//為n5繫結mouseenter mouseleave兩個事件，併為其傳入附加資料data

$("body").delegate("#n5", events);