解決上一篇jquery中on的疑惑

標籤：str   amp   選取器   nts   就會   節點   無效   例子   程式   

內容都是來自：http://www.365mini.com/page/jquery-on.htm。這裡做一下收藏。文章的最後  疑問和解答可以解決所有的疑惑  看了之後能更好的整篇文章。

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就會捕獲該事件，從而執行綁定的事件處理函數。

通俗易懂地說，如果我們希望給頁面上所有的<P>標籤綁定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>元素繫結點擊事件：

// 為div中的所有p元素繫結click事件處理常式// 只有n2、n3可以觸發該事件$("div").on("click", "p", function(){    // 這裡的this指向觸發點擊事件的p元素(Element)    alert( $(this).text() );});

如果要綁定所有的<p>元素，你可以編寫如下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);

網友疑問：

即使合格元素是on()函數執行後新添加，綁定事件對其依然有效. 這個是錯的，我實驗了下 $(‘p‘).on(‘click‘, function(){
alert($(this).text());
});
$(‘body>div‘).append($(‘<p>sssssaa</p>‘)); 後加的p並不具有事件

樓主解答：

親，你的用法不對。你再好好看看on的API，尤其是文章中的【重要說明】。
on() 如果不傳selector參數，那麼就是直接綁定，不是事件委託機制；如果加了selector參數，那就是事件委託，之後新添加的元素，只要符合條件，綁定事件依然有效。
比如要對頁面中所有的p標籤綁定click事件，應該這樣寫：
$(document.body).on("click", "p", function(){ });
這樣，新添加的p元素也會綁定click事件。
深入點說，這個click事件實際上是綁定到 document.body 上面的，而不是每個p標籤上，不過它的所有子孫節點發出了click事件，都會冒泡傳遞到 document.body，並觸發其綁定的click事件。jQuery再檢測這個click事件在冒泡的過程中是否"經過"了"p"標籤，如果是，就執行我們指定的回呼函數。

 自己也做了個例子：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../dist/js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(function() {                $("div").on("click", function() {                    $("#aa").append("<span>12121   </span>")                });              //可以觸發click事件                $("div").on("click", "span", function() {                    alert(1236)                });                //不可以觸發click事件                $("span").on("click", function() {                    alert(1236)                });            });        </script>    </head>    <body>        <div id="aa">            點擊這裡        </div>    </body></html>

 

解決上一篇jquery中on的疑惑