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视频教程、web前端视频】

以上是jquery綁定事件有什麼作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！