jQuery 綁定事情的方式總結。本站提示廣大學習愛好者：（jQuery 綁定事情的方式總結）文章只能為提供參考，不一定能成為您想要的結果。以下是jQuery 綁定事情的方式總結正文
jQuery 綁定事情
jQuery提供了多種綁定事情的方式，每種方式各有其特點，明白了它們之間的異同點，有助於我們在寫代碼的時分停止正確的選擇，從而寫出優雅而容易維護的代碼。上面我們來看下jQuery中綁定事情的方式都有哪些。
jQuery中提供了四種事情監聽方式，辨別是bind、live、delegate、on，對應的解除監聽的函數辨別是unbind、die、undelegate、off。在開端看他們之前
一：bind(type,[data],function(eventObject))
bind是運用頻率較高的一種，作用就是在選擇到的元素上綁定特定事情類型的監聽函數，參數的含義如下：
type:事情類型，如click、change、mouseover等;
data:傳入監聽函數的參數，經過event.data取到。可選;
function:監聽函數，可傳入event對象，這裡的event是jQuery封裝的event對象，與原生的event對象有區別，運用時需求留意
bind的源碼：
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);
bind的特點就是會把監聽器綁定到目的元素上，有一個綁一個，在頁面上的元素不會靜態添加的時分運用它沒什麼問題。但假如列表中靜態添加一個“列表元素5”，點擊它是沒有反響的，必需再bind一次才行。要想不這麼費事，我們可以運用live。
jQuery還有一種事情綁定的簡寫方式如a.click(function(){});、a.change(function(){});等，它們的作用與bind一樣，僅僅是簡寫而已。
二：live(type, [data], fn)
live的參數和bind一樣，它又有什麼蹊跷呢，我們還是先瞄一眼源碼：
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到live辦法並沒有將監聽器綁定到自己(this)身上，而是綁定到了this.context上了。這個context是什麼東西呢?其實就是元素的限定范圍，看了上面的代碼就清楚了：
$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol
通常狀況下，我們都不會像第三種方式那樣運用選擇器，所以也就以為這個context通常就是document了，即live辦法把監聽器綁定到了 document上了。不把監聽器直接綁定在元素上，你是不是想起事情委托機制來了呢?若沒有，可以點擊這裡回想一下。live正是應用了事情委托機制來 完成事情的監聽處置，把節點的處置委托給了document。在監聽函數中，我們可以用event.currentTarget來獲取到以後捕獲到事情的 節點。上面的例子來揭曉：
$('#myol li').live('click',getHtml);
三：live存在那樣的缺陷，所以我們就考慮，既然老爺子擔負那麼重，可不可以別把監聽器綁定在document上呢，綁定在就近的父級元素上不就好了。順應正常邏輯，delegate降生了。
參數多了一個selector，用來指定觸發事情的目的元素，監聽器將被綁定在調用此辦法的元素上。看看源碼：
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
又是調用了on，並且把selector傳給了on。看來這個on真的是無足輕重的東西。照樣先不論它。看看示例先：
$('#myol').delegate('li','click',getHtml);
看了這麼多，你是不是刻不容緩想看看這個on的真實面目了呢，這就來：
on(type,[selector],[data],fn)
參數與delegate差不多但還是有纖細的差異，首先type與selector換地位了，其次selector變為了可選項。交流地位的緣由不好查證，應該是為了讓視覺上更舒適一些吧。
我們先不傳selector來看一個例子：
$('#myol li').on('click',getHtml);
可以看到event.currentTarget是li自己，與bind的效果一樣。至於傳selector出來，就是跟delegate一樣的意義了，除了參數順序不同，其他完全一樣。
終於看到on的真實作用了，那麼，這麼多的事情綁定方式，我們該如何停止選擇呢?
其實這個問題是完全不用糾結的，由於你曾經知道他們之間的區別了不是麼?依據實踐狀況推敲運用就行。不過官方有一個引薦就是盡量運用on，由於其他 辦法都是外部調用on來完成的，直接運用on可以進步效率，而且你完全可以用on來替代其他三種寫法。至於如何替代我想就不用這麼直白的寫出來了，真正理 解它們的區別之後自但是然也就不是難事了。
感激閱讀，希望能協助到大家，謝謝大家對本站的支持！
