on()函數用於為指定元素的一個或多個事件綁定事件處理函數。
此外,你還可以額外傳遞給事件處理函數一些所需的資料。
從jQuery 1.7開始,on()函數提供了綁定事件處理程序所需的所有功能,用於統一取代先前的bind()、 delegate()、 live()等事件函數。
on()支援直接在目標元素上綁定事件,也支援在目標元素的祖輩元素上委託綁定。在事件委託綁定模式下,即使是執行on()函數之後新新增的元素,只要它符合條件,綁定的事件處理函數也對其有效。
此外,函數可以為相同元素、相同事件類型綁定多個事件處理函數。觸發事件時,jQuery會依照綁定的先後順序依序執行綁定的事件處理函數。
要刪除透過on()綁定的事件,請使用off()函數。如果要附加一個事件,只執行一次,然後刪除自己,請使用one()函數。
此函數屬於jQuery物件(實例)。
語法
jQuery 1.7 新增此函數。其主要有以下兩種形式的用法:
用法一:
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類型指定的事件處理函數。
關於參數events中可選的命名空間,請參考最下面的範例程式碼。
關於參數selector,你可以簡單地理解為:如果該參數等於null或被省略,則為當前匹配元素綁定事件;否則就是為當前匹配元素的後代元素中符合selector選擇器的元素綁定事件。
參數handler中的this指向當前匹配元素的後代元素中觸發該事件的DOM元素。如果參數selector等於null或被省略,則this指向目前符合元素(也就是該元素)。
on()也會為handler傳入一個參數:表示目前事件的Event物件。
參數handler的回傳值與DOM原生事件的處理函數回傳值作用一致。例如"submit"(表單提交)事件的事件處理函數傳回false,可以阻止表單的提交。
如果事件處理函數handler只為傳回false值,可以直接將handler設為false。
傳回值
on()函數的傳回值為jQuery類型,傳回目前jQuery物件本身。
重要說明:
如果傳遞了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);
在這裡的範例中,事件委託機制就是,我們不為每個P元素直接綁定click事件處理函數,而是委託給其某個公共的祖輩元素(此處範例中為document.body) ,"告訴"他:如果接收到了click事件觸發通知,並且這個click事件是由我們這些P元素其中之一觸發的,就執行祖輩元素上委託綁定的事件處理函數。
注意:"focus"、"blur"等部分事件不支援冒泡,使用事件委託機制將無效。不過,他們一般也有對應的支持冒泡的事件。例如與"focus"對應的"focusin",與"blur"對應的"focusout"。此外,我們也可以使用event.stopPropagation()方法,讓目前觸發的事件停止冒泡。
範例&說明
以點擊事件("click")為例,以下是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 id="n1"> <p id="n2"><span>CodePlayer</span></p> <p id="n3"><span>专注于编程开发技术分享</span></p> <em id="n4">http://www.365mini.com</em> </div> <p id="n5">Google</p>
我們為
元素綁定點擊事件:
// 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click", "p", function(){ // 这里的this指向触发点击事件的p元素(Element) alert( $(this).text() ); });
如果要綁定所有的
元素,你可以寫如下jQuery程式碼:
//为所有p元素绑定click事件处理程序(注意:这里省略了selector参数) //n2、n3、n5均可触发该事件 $("p").on("click", function(event){ // 这里的this指向触发点击事件的p元素(Element) alert( $(this).text() ); });
此外,我們還可以同時綁定多個事件,並為事件處理函數傳遞一些附加的數據,我們可以透過jQuery為事件處理函數傳入的參數event(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( "再见!"); } }); 此外,即使符合条件的元素是on()函数执行后新添加,绑定事件对其依然有效。同样以初始HTML代码为例,我们可以编写如下jQuery代码: // 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click", "p", function(event){ alert( $(this).text() ); }); // 后添加的n6也可以触发上述click事件,因为它也是div中的p元素 $("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');
參數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 events = { "mouseenter": function(event){ $(this).html( "你好," + event.data.name + "!"); }, "mouseleave": function(event){ $(this).html( "再见!"); } }; //为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data $("body").on(events, "#n5", data);
以上是jQuery.on() 函數用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!