【jquery】$jquery.on()函數解析

on()函數用于為指定元素的一個或多個事件綁定事件處理函數

此外,你還可以額外傳遞給事件處理函數一些所需的數據。

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

即使是執行on()函數之后新添加的元素,只要它符合條件,綁定的事件處理函數也對其有效。

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

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

該函數屬于jQuery對象(實例)。

語法

jQuery1.7 新增該函數。其主要有以下兩種形式的用法:

用法一

1jQueryObject.on( events [, selector ] [, data ], handler )

用法二

1jQueryObject.on( eventsMap [, selector ] [, data ] )

參數

關于參數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")為例,以下是jQuery中事件函數的常規用法(某些函數也存在其它形式的用法,此處暫不列出):

請參考下面這段初始HTML代碼:

我們為<div>中的所有<p>元素綁定點擊事件:

如果要綁定所有的<p>元素,你可以編寫如下jQuery代碼:

此外,我們還可以同時綁定多個事件,并為事件處理函數傳遞一些附加的數據,我們可以通過jQuery為事件處理函數傳入的參數event(Event事件對象)來進行處理:

此外,即使符合條件的元素是on()函數執行后新添加,綁定事件對其依然有效。同樣以初始HTML代碼為例,我們可以編寫如下jQuery代碼:

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (續jQuery基礎(1)) 第5章 DOM節點的復制與替換 (1)DOM拷貝clone() 克隆節點是DOM的常...
    凜0_0閱讀 1,370評論 0 8
  • 總結: 鼠標事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,640評論 2 10
  • 第1章 鼠標事件 1-1 jQuery鼠標事件之click與dbclick事件 用交互操作中,最簡單直接的操作就是...
    mo默22閱讀 1,307評論 0 6
  • 為甚嚒要學習jQuery? 因為JS中有很多痛點: window.onload事件只能出現一次,如果出現多次,后面...
    magic_pill閱讀 844評論 0 13
  • N年前,我是一個混跡于天涯新浪雅虎的女子。 每天不在論壇里寫點什么好像會睡不著…… 轉眼,好多年過去,這個習慣慢慢...
    谷子愛大米閱讀 170評論 0 0