jquery繫結事件有什麼作用

jquery繫結事件的作用：將普通的事件event繫結在DOM節點上，當DOM節點被選中時，將事件與之繫結，方便使用者提供相應的操作。jQuery中提供了四種事件繫結方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。

本教學操作環境：windows7系統、jquery3.6版本、Dell G3電腦。

什麼是事件？

頁面對不同存取者的響應叫做事件。

事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。

範例：

• 在元素上移動滑鼠。

• 選取無線電鈕

• 點選元素

在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。

jquery的事件繫結

通常，我們是需要對具體的節點的相關事件作處理，比如一個按鈕被點選了之類的。但這裡有一個問題，如果我們能獲取到具體的節點，當然沒什麼說的。不過有時，我們要處理的節點卻還沒有存在，但是我們又要預定義它的事件處理。比如，我們說在一個 UL 中，每一個 LI 被點選時，都要執行一個函數。但是， UL 中的內容本身可能是變化的，開始時它只有兩個 LI ，之後又變成了三個 LI ，多出的那一個 LI 也要能響應事件才行。

上述的情況是一個普遍的需求。我們可以利用事件的冒泡機制來實現目的。我們把事件處理繫結在 UL 上，這樣，當 LI 被點選時，會冒泡到上級的 UL ，這樣在處理事件時就可以判斷出具體是哪個節點的事件，以便作下一步處理。

事件繫結就是針對dom元素的事件，繫結在dom元素上，可以在一個元素上監聽同一事件多次。作用：將普通的事件 event 繫結在 DOM 節點上，當 DOM 節點被選中時，將事件與之繫結，方便使用者提供相應的操作。

jQuery中提供了四種事件繫結方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。

這幾種方式之間的區別：

1、bind()函數只能針對已經存在的元素進行事件的設定；但是live(),on(),delegate()均支援未來新新增元素的事件設定；

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

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

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

下面詳細介紹一下這幾種方式：

1、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一樣，僅僅是簡寫而已。

2、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);

3、delegate和on

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來代替其他三種寫法。至於如何代替我想就不必這麼直白的寫出來了，真正理 解它們的區別之後自然而然也就不是難事了。

【推薦學習：、】

以上就是jquery繫結事件有什麼作用的詳細內容，更多請關注TW511.COM其它相關文章！