jquery on方法原理_jQuery.on() 函數深入解析

on()函數用於為指定元素的一個或多個事件綁定事件處理函數。此外，還可以額外傳遞給事件處理函數一些所需的數據。

基本介紹

從jQuery 1.7開始，on()函數提供了綁定事件處理程序所需的所有功能，用於統一取代以前的bind()、 delegate()、 live()等事件函數。

on()支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委托綁定。在事件委托綁定模式下，即使是執行on()函數之后新添加的元素，只要它符合條件，綁定的事件處理函數也對其有效。

此外，該函數可以為同一元素、同一事件類型綁定多個事件處理函數。觸發事件時，jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。

要刪除通過on()綁定的事件，請使用off()函數。如果要附加一個事件，只執行一次，然后刪除自己，請使用one()函數。

語法

用法一：jQueryObject.on( events [, selector ] [, data ], handler )

用法二：jQueryObject.on( eventsMap [, selector ] [, data ] )

參數

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

eventsMap : Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。

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

data : 可選/任意類型。觸發事件時，需要通過event.data傳遞給事件處理函數的任意數據。

handler: Function類型指定的事件處理函數。

返回值

on()函數的返回值為jQuery類型，返回當前jQuery對象本身。

selector參數綁定機制：

如果傳遞了selector參數，那么on()函數並不是為當前jQuery對象匹配的元素綁定事件處理函數，而是為它們的后代元素中符合選擇器selector參數的元素綁定事件處理函數。

on()函數並不是直接為這些后代元素挨個綁定事件，而是委托給當前jQuery對象的匹配元素來處理。由於DOM 2級的事件流機制，當后代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會判斷是哪個后代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行綁定的事件處理函數。

通俗易懂地說，如果我們希望給頁面上所有的

標簽綁定click事件處理函數，我們可以在每個P標簽上直接分別綁定click事件處理函數。例如：// 為所有P元素分別綁定click事件處理函數handler

$("p").on("click", handler);

我們也可以在這些P標簽的任意一個公共祖輩元素上綁定事件委托機制，利用DOM的事件冒泡機制來統一委托處理。當我們觸發了某個元素的click事件，JS會依次通知該元素及其”父輩”元素、”爺爺輩”元素……直到最頂部的document對象為止，如果這些元素上綁定了click事件處理函數就會依次執行。// 在body元素上綁定click事件處理函數handler，如果這個click事件是由其后代的P元素觸發的，就執行handler

$(document.body).on("click", "p", handler);

回調函數的event

我們還可以同時綁定多個事件，並為事件處理函數傳遞一些附加的數據，通過jQuery為事件處理函數傳入的參數event.type(Event事件對象)來進行處理：var data = { id: 5, name: "張三" };

// 為n5綁定mouseenter mouseleave兩個事件，並為其傳入附加數據data

// 附加數據可以是任意類型

$("body").on("mouseenter mouseleave", "#n5", 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( "再見!");

}

});

data參數

如上通過回調函數的event.data獲取。

參數events/eventsMap

帶命名空間的事件(namespaced events):

參數events還支持為事件類型附加額外的命名空間。當為同一元素綁定多個相同類型的事件處理函數時。使用命名空間，可以在觸發事件、移除事件時限定觸發或移除的范圍。function clickHandler(event){

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

}

var $p = $("p");

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

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

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

$p.on( "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.off( "click.foo" ); // 移除A

on()函數的參數eventsMap是一個對象，可以”屬性-值”的方式指定多個”事件類型-處理函數”。對應的示例代碼如下：var data = { id: 5, name: "張三" };

var eventsMap= {

"mouseenter": function(event){

$(this).html( "你好，" + event.data.name + "!");

},

"mouseleave": function(event){

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

}

};

//為n5綁定mouseenter mouseleave兩個事件，並為其傳入附加數據data

$("body").on(eventsMap, "#n5", data);