《Mysql必讀jQuery 綁定事件的方式總結》要點：
本文介紹了Mysql必讀jQuery 綁定事件的方式總結，希望對您有用。如果有疑問，可以聯系我們。
MYSQL學習? jQuery 綁定事件
MYSQL學習jQuery提供了多種綁定事件的方式,每種方式各有其特點,明白了它們之間的異同點,有助于我們在寫代碼的時候進行正確的選擇,從而寫出優雅而容易維護的代碼.下面我們來看下jQuery中綁定事件的方式都有哪些.
MYSQL學習???? jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off.在開始看他們之前
MYSQL學習??? 一：bind(type,[data],function(eventObject))
MYSQL學習????? bind是使用頻率較高的一種,作用就是在選擇到的元素上綁定特定事件類型的監聽函數,參數的含義如下：
MYSQL學習????? type:事件類型,如click、change、mou搜索引擎優化ver等;
MYSQL學習????? data:傳入監聽函數的參數,通過event.data取到.可選;
MYSQL學習???? function:監聽函數,可傳入event對象,這里的event是jQuery封裝的event對象,與原生的event對象有區別,使用時需要注意
MYSQL學習?? bind的源碼：
MYSQL學習
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);
MYSQL學習bind的特點就是會把監聽器綁定到目標元素上,有一個綁一個,在頁面上的元素不會動態添加的時候使用它沒什么問題.但如果列表中動態增加一個“列表元素5”,點擊它是沒有反應的,必須再bind一次才行.要想不這么麻煩,我們可以使用live.
MYSQL學習jQuery還有一種事件綁定的簡寫方式如a.click(function(){});、a.change(function(){});等,它們的作用與bind一樣,僅僅是簡寫罷了.
MYSQL學習二：live(type, [data], fn)
MYSQL學習live的參數和bind一樣,它又有什么蹊蹺呢,我們還是先瞄一眼源碼：
MYSQL學習
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
MYSQL學習?可以看到live辦法并沒有將監聽器綁定到自己(this)身上,而是綁定到了this.context上了.這個context是什么東西呢?其實就是元素的限定范圍,看了下面的代碼就清楚了：
MYSQL學習
$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol
MYSQL學習通常情況下,我們都不會像第三種方式那樣使用選擇器,所以也就認為這個context通常就是document了,即live辦法把監聽器綁定到了 document上了.不把監聽器直接綁定在元素上,你是不是想起事件委托機制來了呢?若沒有,可以點擊這里回憶一下.live正是利用了事件委托機制來 完成事件的監聽處理,把節點的處理委托給了document.在監聽函數中,我們可以用event.currentTarget來獲取到當前捕捉到事件的 節點.下面的例子來揭曉：
MYSQL學習$('#myol li').live('click',getHtml);?
MYSQL學習三：live存在那樣的缺點,所以我們就思考,既然老爺子負擔那么重,可不可以別把監聽器綁定在document上呢,綁定在就近的父級元素上不就好了.順應正常邏輯,delegate誕生了.
MYSQL學習參數多了一個selector,用來指定觸發事件的目標元素,監聽器將被綁定在調用此辦法的元素上.看看源碼：
MYSQL學習
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
MYSQL學習?又是調用了on,并且把selector傳給了on.看來這個on真的是舉足輕重的東西.照樣先不管它.看看示例先：
MYSQL學習$('#myol').delegate('li','click',getHtml);
MYSQL學習看了這么多,你是不是迫不及待想看看這個on的真實面目了呢,這就來：
MYSQL學習on(type,[selector],[data],fn)?
MYSQL學習參數與delegate差不多但還是有細微的差別,首先type與selector換位置了,其次selector變為了可選項.交換位置的原因不好查證,應該是為了讓視覺上更舒服一些吧.
MYSQL學習我們先不傳selector來看一個例子：
MYSQL學習$('#myol li').on('click',getHtml);?
MYSQL學習可以看到event.currentTarget是li自己,與bind的效果一樣.至于傳selector進去,就是跟delegate一樣的意義了,除了參數順序不同,其他完全一樣.
MYSQL學習終于看到on的真實作用了,那么,這么多的事件綁定方式,我們該如何進行選擇呢?
MYSQL學習其實這個問題是完全不必糾結的,因為你已經知道他們之間的區別了不是么?根據實際情況斟酌使用就行.不過官方有一個推薦就是盡量使用on,因為其他 辦法都是內部調用on來完成的,直接使用on可以提高效率,而且你完全可以用on來代替其他三種寫法.至于如何代替我想就不必這么直白的寫出來了,真正理 解它們的區別之后自然而然也就不是難事了.
MYSQL學習感謝閱讀,希望能贊助到大家,謝謝大家對本站的支持!
歡迎參與《Mysql必讀jQuery 綁定事件的方式總結》討論，分享您的想法，維易PHP學院為您提供專業教程。
