本篇文章主要是對jQuery中delegate和on的用法與區(qū)別進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出西峽免費做網(wǎng)站回饋大家。
在jQuery1.7中
.delegate()已被.on()取代。對于早期版本，它仍然使用事件委托的最有效手段。
在事件綁定和委派，delegate()和on在一般情況下，這兩種方法是等效的。
.delegate()
指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。
代碼如下:
//
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:
兩者區(qū)別是seleter和events順序不同
delegate和on方法被選元素的子元素必須是"合法的"子元素。比如
復(fù)制代碼
代碼如下:
$("table").delegate("button","click",function(){...});
$("table").on("click",
"p",
function(){...});
就不起作用，因為正常情況下，table子元素應(yīng)為tr,td...
on(events,[selector],[data],fn)，參數(shù)[selector]是可選，
一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。
例如：
代碼如下:
$("table").on("click",
".td1",
function()
{
alert("hi");
});
過濾class為td1的table子元素
而delegate的selector是必需的。
click是點擊事件，但是在頁面加載完之后，jquery事件新添加的元素，用click的話是無法獲取元素的，這個時候要用on去獲取元素事件，簡單的說頁面加載完成時候頁面顯示的元素可以用on，也可以用click，但是頁面加載完成之后后期再追加的元素只能用on。
兩者區(qū)別是seleter和events順序不同
delegate和on方法被選元素的子元素必須是"合法的"子元素。on(events,[selector],[data],fn)，參數(shù)[selector]是可選，
一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。
delegate的selector是必需的。
bind是用來綁定一個或多個事件的，live其實bind的一個加強版，用來綁定通過JavaScript或者jQuery添加的DOM元素事件，其語法結(jié)構(gòu)是一樣
123456$("p").bind("mouseenter mouseleave",function(){alert("ok");})$("p").live("mouseenter mouseleave",function(){alert("ok");})
delegate用于事件委托，也是綁定過JavaScript或者jQuery添加的DOM元素事件。
123$("div").delegate("p","click",function(){alert("p");})
點擊div下面的P執(zhí)行alert;
而on是在1.7之后新增的，是把bind,live,delegate全部合并在一起了，
123$("div").on("click","p",function(){ alert(1); })
不需要事件委托的時候把P去掉就會變成點擊div觸發(fā)了。
個人建議根據(jù)版本來使用，語法其實都差不多，如果你是用1.7版本以上就建議用on，畢竟bind，live，delegate這些將來都會遺棄了，如有錯誤，請指出。順便吐槽一下樓上的回答，不走心啊
.bind()與.on()的區(qū)別：
（1）是否支持selector這個參數(shù)值。由于javascript的事件冒泡特性，如果在父元素上注冊了一個事件處理函數(shù)，當(dāng)子元素上發(fā)生這個事件的時候，父元素上的事件處理函數(shù)也會被觸發(fā)。
如果使用on的時候，不設(shè)置selector，那么on與bind就沒有區(qū)別了。
（2）on綁定的事件處理函數(shù)，對于未來新增的元素一樣可以的，和delegate效果相同，而bind則不行。?
（3） delegate用法與on()相同，只是參數(shù)的順序不同：
擴展資料：
.bind()與.on()的實際應(yīng)用：
1.bind()是直接綁定在元素上 ，將一本地地址與一套接口捆綁。如無錯誤發(fā)生，則bind()返回0。否則的話，將返回-1，應(yīng)用程序可通過WSAGetLastError()獲取相應(yīng)錯誤代碼。
用于事件處理程序
function ClassName(){
this.eventHandler = (function(){
}).bind(this);
}
2.on()則實現(xiàn)事件代理, 可以在匹配元素上綁定一個或者多個事件處理函數(shù)。
（1） 用來綁定多事件,并且為同一函數(shù)，如：
$('div').on('click mouseover',function(){
//do sth
});
（2）多個事件綁定不同函數(shù)，如：
$('div').on({
'click':function(){
//do sth
},
'mouseover':function(){
//do sth
}
});
（3）事件代理，如：
html:
button id="bt1"按鈕1/button
jq:
$('#bt1').on('click',function(){
$('body').append('button按鈕2/button');
});
$('body').on('click','.bt2',function(){
console.log('這是bt2');
}
參考資料：百度百科-bind()
重慶分公司
重慶分公司
