jquery綁定事件的作用是什么

本篇內(nèi)容介紹了“jquery綁定事件的作用是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

jquery綁定事件的作用：將普通的事件event綁定在DOM節(jié)點上，當(dāng)DOM節(jié)點被選中時，將事件與之綁定，方便用戶提供相應(yīng)的操作。jQuery中提供了四種事件綁定方式，分別是bind、live、delegate、on，對應(yīng)的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off。

什么是事件？

頁面對不同訪問者的響應(yīng)叫做事件。

事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法。

實例：

• 在元素上移動鼠標(biāo)。

• 選取單選按鈕

• 點擊元素

在事件中經(jīng)常使用術(shù)語"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時觸發(fā) keypress 事件"。

jquery的事件綁定

通常，我們是需要對具體的節(jié)點的相關(guān)事件作處理，比如一個按鈕被點擊了之類的。但這里有一個問題，如果我們能獲取到具體的節(jié)點，當(dāng)然沒什么說的。不過有時，我們要處理的節(jié)點卻還沒有存在，但是我們又要預(yù)定義它的事件處理。比如，我們說在一個 UL 中，每一個 LI 被點擊時，都要執(zhí)行一個函數(shù)。但是， UL 中的內(nèi)容本身可能是變化的，開始時它只有兩個 LI ，之后又變成了三個 LI ，多出的那一個 LI 也要能響應(yīng)事件才行。

上述的情況是一個普遍的需求。我們可以利用事件的冒泡機(jī)制來實現(xiàn)目的。我們把事件處理綁定在 UL 上，這樣，當(dāng) LI 被點擊時，會冒泡到上級的 UL ，這樣在處理事件時就可以判斷出具體是哪個節(jié)點的事件，以便作下一步處理。

事件綁定就是針對dom元素的事件，綁定在dom元素上，可以在一個元素上監(jiān)聽同一事件多次。作用：將普通的事件 event 綁定在 DOM 節(jié)點上，當(dāng) DOM 節(jié)點被選中時，將事件與之綁定，方便用戶提供相應(yīng)的操作。

jQuery中提供了四種事件綁定方式，分別是bind、live、delegate、on，對應(yīng)的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off。

這幾種方式之間的區(qū)別：

1、bind()函數(shù)只能針對已經(jīng)存在的元素進(jìn)行事件的設(shè)置；但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置；

2、bind()函數(shù)在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以用來代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；

3、live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些

4、bind()支持Jquery所有版本；live()支持jquery1.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

下面詳細(xì)介紹一下這幾種方式：

1、bind(type,[data],function(eventObject))

bind是使用頻率較高的一種，作用就是在選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)，參數(shù)的含義如下：

type:事件類型，如click、change、mouseover等;

data:傳入監(jiān)聽函數(shù)的參數(shù)，通過event.data取到。可選;

function:監(jiān)聽函數(shù)，可傳入event對象，這里的event是jQuery封裝的event對象，與原生的event對象有區(qū)別，使用時需要注意

bind的源碼：

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

$('#myol li').bind('click',getHtml);

bind的特點就是會把監(jiān)聽器綁定到目標(biāo)元素上，有一個綁一個，在頁面上的元素不會動態(tài)添加的時候使用它沒什么問題。但如果列表中動態(tài)增加一個“列表元素5”，點擊它是沒有反應(yīng)的，必須再bind一次才行。要想不這么麻煩，我們可以使用live。

jQuery還有一種事件綁定的簡寫方式如a.click(function(){});、a.change(function(){});等，它們的作用與bind一樣，僅僅是簡寫而已。

2、live(type, [data], fn)

live的參數(shù)和bind一樣，它又有什么蹊蹺呢，我們還是先瞄一眼源碼：

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。這個context是什么東西呢?其實就是元素的限定范圍，看了下面的代碼就清楚了：

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

通常情況下，我們都不會像第三種方式那樣使用選擇器，所以也就認(rèn)為這個context通常就是document了，即live方法把監(jiān)聽器綁定到了 document上了。不把監(jiān)聽器直接綁定在元素上，你是不是想起事件委托機(jī)制來了呢?若沒有，可以點擊這里回憶一下。live正是利用了事件委托機(jī)制來 完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document。在監(jiān)聽函數(shù)中，我們可以用event.currentTarget來獲取到當(dāng)前捕捉到事件的 節(jié)點。下面的例子來揭曉：

$('#myol li').live('click',getHtml);

3、delegate和on

live存在那樣的缺點，所以我們就思考，既然老爺子負(fù)擔(dān)那么重，可不可以別把監(jiān)聽器綁定在document上呢，綁定在就近的父級元素上不就好了。順應(yīng)正常邏輯，delegate誕生了。

參數(shù)多了一個selector，用來指定觸發(fā)事件的目標(biāo)元素，監(jiān)聽器將被綁定在調(diào)用此方法的元素上?？纯丛创a：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是調(diào)用了on，并且把selector傳給了on?？磥磉@個on真的是舉足輕重的東西。照樣先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了這么多，你是不是迫不及待想看看這個on的真實面目了呢，這就來：

on(type,[selector],[data],fn)

參數(shù)與delegate差不多但還是有細(xì)微的差別，首先type與selector換位置了，其次selector變?yōu)榱丝蛇x項。交換位置的原因不好查證，應(yīng)該是為了讓視覺上更舒服一些吧。

我們先不傳selector來看一個例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，與bind的效果一樣。至于傳selector進(jìn)去，就是跟delegate一樣的意義了，除了參數(shù)順序不同，其他完全一樣。

終于看到on的真實作用了，那么，這么多的事件綁定方式，我們該如何進(jìn)行選擇呢?

其實這個問題是完全不必糾結(jié)的，因為你已經(jīng)知道他們之間的區(qū)別了不是么?根據(jù)實際情況斟酌使用就行。不過官方有一個推薦就是盡量使用on，因為其他 方法都是內(nèi)部調(diào)用on來完成的，直接使用on可以提高效率，而且你完全可以用on來代替其他三種寫法。至于如何代替我想就不必這么直白的寫出來了，真正理 解它們的區(qū)別之后自然而然也就不是難事了。

“jquery綁定事件的作用是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！