首頁 > 文章 > web前端 > jquery事件代理的意思是什麼

jquery事件代理的意思是什麼

WBOY原創: 2022-06-17 17:11:231594瀏覽

在jquery中，事件代理的意思是把事件綁定到父級元素，等待事件經由DOM冒泡到該元素時再執行的行為；事件代理就是利用事件冒泡的原理把事件加到父級上，透過判斷事件來源，執行對應的子元素的操作，可以大幅減少事件綁定次數，提高效能。

jquery事件代理的意思是什麼

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

jquery事件代理程式的意思是什麼

在jQuery中，事件代理程式是指：把事件綁定到父級元素，然後等待事件透過DOM冒泡到該元素時再執行。

事件代理就是利用事件冒泡的原則(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上，透過判斷事件來源，執行對應的子元素的操作，事件代理首先可以大幅減少事件綁定次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作。

在事件偵聽過程中有兩種觸發事件的方式：事件擷取和事件冒泡。事件冒泡更快，效率更高。

事件擷取：事件在DOM中向後代元素下沉。

事件冒泡：事件從發生事件的來源元素經由DOM向上冒泡。

jQuery使用事件冒泡的方式來處理所有的事件。 jQuery函式庫提供了3個方法來綁定元素的事件處理函數，分別是bind()、live()、delegate()。

1、使用.bind()綁定事件處理函數:必須提供兩個參數，第一個是事件類型，第二個是事件處理函數。

.bind(event type,event handle)

如：

$(document).ready(function(){
　　$(".selector").bind("click",alertMe);
function alertMe(){
　　alert("Hello world!");
}
});

.bind()方法只適用於DOM中已經存在的元素綁定事件處理函數。對於後來通過操作腳本時添加的DOM元素，則不起作用。

設想：在DOM中有一個.box元素，你希望某個連結在每次被單機時複製這個元素，並把它加到DOM。首先，我們可以為這個連結綁定一個適當的click事件處理函數。每單擊這個鏈接一次，.clone()方法就會調用一次，複製box元素並把它追加到相應的容器中：

$(document).ready(function(){
    $(&#39;.box&#39;).bind(&#39;click&#39;,function(){
        $(this).clone().appendTo(&#39;.container&#39;);        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

在瀏覽器運行，結果是單擊這個鏈接，會追加元素。但是當點擊除了第一個連結的元素時，並不會執行click事件。

因此：綁定的click事件不能作用於這些剛剛被加入到DOM中的新元素。只有綁定事件那一刻DOM中存在的元素才會成功綁定click事件。 click事件只是被綁定到第一個元素上，因此雖然能不斷克隆第一個元素，而被克隆出來的這些元素卻沒有一個能夠受click事件影響。如果想這個克隆出來的元素能夠受click事件影響，可以使用.live()綁定。

2、使用.live()綁定事件處理函數

.live()方法提供了一種相當靈活地捕捉事件的方式。它的用法與.bind()極為相似。唯一不同點是.live()方法不僅作用於DOM中目前存在的元素，也作用於將來可能存在（動態生成）的元素。

.live(event type,event handle)

修改上面的範例：

$(document).ready(function(){
    $(&#39;.box&#39;).live(&#39;click&#39;,function(){
        $(this).clone().appendTo(&#39;.container&#39;);        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

3、使用.delegate()綁定事件處理函數

#.delegate(selector,event type,event handler)

修改上述範例：

<script type="text/javascript">
  
  $(document).ready(function(){
        $(&#39;.container&#39;).delegate(&#39;.box&#39;,&#39;click&#39;,function(){
            $(this).clone().appendTo(&#39;.container:first&#39;);        
        });
    });    
  </script>
  <body>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
  </body>

於用.live()綁定事件處理函式執行效果一樣。但是用.delegate()綁定事件處理函數要比用.live()效率更高。 jQuery庫有關綁定的部分原始碼

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },
    live: function( types, data, fn ) {
        alert(this.context); //添加一行
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },
    delegate: function( selector, types, data, fn ) {
        alert(this); //添加一行
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
    },

分別在live和delegate方法內增加了一行，瀏覽器運行後，使用.live()，彈出是document,也就是說用.live()綁定定事件，它的源頭是document。使用.delegate()，彈出的是object,也就是說用.delegate()綁定事件，它的源頭是具體綁定的元素。因此，使用.delegate()要比使用.live()效率更高。

從原始碼可以看出，用.bind()綁定事件處理函數，可以使用unbind()取消事件綁定。

　　　　　　　　用.live()綁定事件處理函數，可以使用die()取消事件綁定。

　　　　　　　　用.delegate()綁定事件處理函數，可以使用undelegate()取消事件綁定。

影片教學推薦：jQuery影片教學

以上是jquery事件代理的意思是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery Object die Delegate Event 事件 dom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery中event是什麼意思下一篇：jquery中event是什麼意思

看更多