jQuery中delegate和on的用法與區別詳細解析

轉載 時間:2014-01-26

本篇文章主要是對jQuery中delegate和on的用法與區別進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助

在jQuery1.7中 .delegate()已被.on()取代。對于早期版本,它仍然使用事件委托的最有效手段。

在事件綁定和委派,delegate()和on在一般情況下,這兩種方法是等效的。

.delegate() 指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規定當這些事件發生時運行的函數。

復制代碼代碼如下:

// jQuery 1.4.3+

$( elements ).delegate( selector, events, data, handler );

// jQuery 1.7+

$( elements ).on( events, [selector], data, handler );

例如:.delegate()? code:

復制代碼代碼如下:

$("table").delegate("td","click",function(){

alert("hello");

});

.on()? code:

復制代碼代碼如下:

$("table").on("click", "td", function() {

alert("hi");

});

PS: 兩者區別是seleter和events順序不同

delegate和on方法被選元素的子元素必須是"合法的"子元素。比如

復制代碼代碼如下:

$("table").delegate("button","click",function(){...});

$("table").on("click", "p", function(){...});

就不起作用,因為正常情況下,table子元素應為tr,td...

on(events,[selector],[data],fn),參數[selector]是可選,

一個選擇器字符串用于過濾器的觸發事件的選擇器元素的后代。

例如:

復制代碼代碼如下:

$("table").on("click", ".td1", function() {

alert("hi");

});

過濾class為td1的table子元素

而delegate的selector是必需的。

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

推薦閱讀更多精彩內容

  • 大家好,我是IT修真院武漢分院第10期學員余佳貝,一枚正直善良的web程序員。 今天給大家分享一下,修真院官網js...
    寡人yu閱讀 3,010評論 0 1
  • 1、 jQuery 能做什么? jquery是一個豐富的js庫,內部對js的很多復雜的方法進行了封裝和加工,比如j...
    zh_yang閱讀 1,422評論 6 13
  • 這是一個真實的故事,這是一個傳奇的人物,這是一個生命的傳奇。這是一直埋藏于我心里,總是讓我牽腸掛肚的家長,每每想到...
    yaya娃娃閱讀 774評論 3 3
  • 只是想到很久之前看到過的一句話 人山人海之中 做不了你的大英雄 也要做一把你的大雨傘 為你遮風擋雨 我能且一定能護...
    健忘的喵小姐閱讀 483評論 0 3
  • 之所以想寫這個話題,就是想通過文字分析找到根結所在,調用元認知能力重新認識自己。 通常我都是在自己沒有達到自己設定...
    翔子52雙魚閱讀 1,334評論 0 0