jQuery的事件委託機制和事件繫結的區別

阿新 • • 發佈：2019-01-18

首先看一下DOM樹：

當我們點選一個事件的時候，其觸發了連線元素的單擊事件，該事件則引發任何我們已經繫結到該元素的單擊事件上的函式的執行。

例如：

$('a').bind('click',function(){

alert("hello world");

})

click事件接著會向樹的根方向傳播最終會傳播到window物件，

在操縱DOM的語境中，document是根節點。

1：.bind()事件

如上例所示，jQuery掃描檔案找出所用的$('a')元素，並把alert函式繫結到每個元素的click事件上。

2：.live()事件

如：$('a').live('click',function(){

alert('hello world');

})

JQuery把alert函式繫結到$(document)元素上，並使用’click’和’a’作為引數。任何時候只要有事件冒泡到document節點上，它就檢視該事件是否是一個click事件，以及該事件的目標元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執行函式。
　　live方法還可以被繫結到具體的元素(或“context”)而不是document上，像這樣：

[javascript] view plain copy

$('a', $('#container')[0]).live(...);

3:delegate事件 [javascript]

view plain copy

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

　　JQuery掃描文件查詢$(‘#container’)，並使用click事件和’a’這一CSS選擇器作為引數把alert函式繫結到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就檢視該事件是否是click事件，以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都為真的話，它就執行函式。
　　可以注意到，這一過程與.live()類似，但是其把處理程式繫結到具體的元素而非document這一根上。精明的JS’er們可能會做出這樣的結論，即$('a').live() == $(document).delegate('a')，是這樣嗎?嗯，不，不完全是。

現在用的比較多的就是on了

通過檢視jQuery的原始碼(我檢視的版本是1.12.4)，可以發現無論bind()還是delegate()都是通過on()方法實現的，只是引數不同，如下圖：
這裡寫圖片描述

直接繫結和事件委託

1:直接繫結：大多數瀏覽器的事件冒泡，都是從文件的最深、最內層發生事件的元素(也稱為event target——事件目標)，一路向上到達body或document元素上。在IE8和之前的版本上，少數事件例如change、submit不支援原生的事件冒泡，但jQuery模擬並建立了一致的、跨瀏覽器的事件冒泡行為。

如果on()方法的selector 引數為空，事件處理程式就被稱為直接繫結。每當在被繫結元素上(如下例中被繫結的document元素，譯者注)發生事件時，無論這個事件發生在這個元素上還是從內層元素經冒泡而來，該處理程式都會被呼叫。

並且，如果on()方法的selector 引數為空，它與bind()方法相同——只能繫結頁面已有元素的事件。

下面我們用程式碼說明什麼是直接繫結：

<body>
<div>
        這是一個div
        <button>點選</button>
</div>
<script type="text/javascript">
        $(function(){
            //將click事件繫結在document物件上，
            //頁面上任何元素髮生的click事件都冒泡到document物件上得到處理
            //從而呼叫事件處理程式
            //本例為了簡單繫結到了document，實際上繫結到那個元素上都有類似效果
            $(document).on("click",function(e){
               console.log(e.target.tagName + " is clicked")
            })  
        })
    </script>
</body>

頁面執行效果如下圖：
這裡寫圖片描述

如果on()方法的selector 引數不為空，事件處理程式就被稱為委託。當事件直接發生在被繫結的元素上(如下例中繫結到document上，譯者注)時，該程式不會被呼叫，而只有當事件發生在與選擇器匹配的內部元素上(如下例中click事件發生在button上，譯者注)時，才會呼叫該程式。

jQuery的事件委託是將事件從事件的發生者(即event target,譯者注)一直向上冒泡到綁定了事件處理程式的元素上(例如從最內層元素向上冒泡到最外層元素)，併為冒泡“沿路”過程中匹配的所有選擇器執行事件處理程式。

下面我們用程式碼說明什麼是委託：

<body>
    <div>
        這是一個div
        <button>點選</button>
    </div>
    <script type="text/javascript">
        $(function(){
            //將click事件繫結在document物件上，
            //並傳入第二個可選引數：selector
            //當事件冒泡到document物件時，檢測事件的target，
            //如果與傳入的選擇符（這裡是button）匹配，就呼叫事件處理程式即觸發事件，否則不觸發。
            $(document).on("click","button",function(e){
                console.log(e.target.tagName + " is clicked")
            })
        })
    </script>
    </body>

面執行效果如下圖：
這裡寫圖片描述

事件處理程式只會被繫結到當前已被選定的元素上(如上例中的document元素上，譯者注)，這些元素在呼叫on()方法時必須已經存在——同bind()。

為了確保這些元素已經存在並能被選中，請將程式碼放置到</body>標籤之前或者在$(function(){ ... })內執行事件繫結。或者，使用事件委託來繫結事件處理程式。

事件委託的優點
      1、能處理來自於內層子元素的事件，這些內層子元素是在稍後時間裡被新增的文件中的。通過選擇一個在繫結事件委託處理程式時肯定存在的元素，就可以使用事件委託來避免需要頻繁的新增和刪除事件處理程式的操作。
      這個元素可以是MVC模式下的一個檢視容器元素或者是document元素(如果事件處理程式需要監聽文件中的全部冒泡事件)。在載入任何html程式碼之前，document元素已經在html文件的頭部存在了，所以無需等待dom ready就可以在document這個元素上繫結事件了，這是安全可靠的。

      2、除了可以處理尚未建立的內層子元素的事件，事件委託的另一個優點是：當需要監聽很多元素時，事件委託的效能更好。

例如：有一個1000行資料的表格，下面的程式碼就是將一個事件處理程式繫結到這1000個元素上，事件繫結需要執行1000次。

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

事件委託方式(如下程式碼)是將事件處理程式繫結到一個元素上，即tbody上，事件只需向上冒泡一級(從被點選的tr元素到tbody元素)。事件只需繫結一次，然後採用事件冒泡來觸發事件。

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

總結

1.選擇器匹配到的元素比較多時，不要用bind()迭代繫結
2.用id選擇器時，可以用bind()
3.需要給動態新增的元素繫結時，用delegate()或者on()
4.用delegate()和on()方法，dom樹不要太深
5.儘量使用on()來代替delegate()和bind()
6.在需要為較多的元素繫結事件的時候，優先考慮事件委託，可以帶來效能上的好處
7.bind()和delegate()都是通過on()方法實現的，只是引數不同——當on()的selector引數為空時，其效果完全等同於bind();當selector引數不為空時，其效果完全等同於delegate();
8.使用.on()方法時，事件只會繫結到$()函式的選擇符表示式匹配的元素上（上面例子中，為了簡單繫結到了document），因此可以精確地定位到頁面中的一部分，從而減少事件冒泡的開銷。

停止傳播

　　最後一個我想做的提醒與事件傳播有關。通常情況下，我們可以通過使用這樣的事件方法來終止處理函式的執行：
[javascript] view plain copy

$('a').bind('click', function(e) {
e.preventDefault();
// 或者
e.stopPropagation();
});

　　不過，當我們使用live或是delegate方法的時候，處理函式實際上並沒有在執行，需要等到事件冒泡到處理程式實際繫結的元素上時函式才會執行。而到此時為止，我們的其他的來自.bind()的處理函式早已運行了。
原文出處：點選開啟連結

jQuery的事件委託機制和事件繫結的區別

總結

停止傳播

jQuery的事件委託機制和事件繫結的區別

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

jQuery事件-委託機制、事件物件

jQuery—事件的繫結和解除繫結

jQuery: Ajax動態載入內容on()繫結事件無效的解決方法

jQuery動態生成的元素如何繫結事件

js IE和火狐繫結事件

從零開始學 Web 之 jQuery（六）為元素繫結多個相同事件，解綁事件

jQuery-為動態新增的元素繫結事件(以及不重複新增新的內容)

利用jquery給動態載入的元素繫結事件

jquery bind 方法一個特點（繫結多個方法到一個dom的某個事件）

jquery html動態新增的元素繫結事件

Jquery給動態新增的元素繫結事件:live() delegate() on()

關於 jquery html 動態新增的元素繫結事件——On()

jQuery向動態新增的元件繫結事件

jQuery bind/One/live三種繫結事件方法的區別

Jquery 對新插入的節點繫結Click事件失效

jquery動態新增元素無法觸發繫結的事件的解決方案。

Qt消息機制和事件

jQuery的on繫結click和直接繫結click區別

jQuery的事件委託機制和事件繫結的區別

總結

停止傳播

相關推薦