溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jquery事件代理指的是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jquery事件代理指的是什么”文章能幫助大家解決問題。
在jquery中，事件代理的意思是把事件綁定到父級元素，等待事件通過DOM冒泡到該元素時再執行的行為；事件代理就是利用事件冒泡的原理把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，可以極大減少事件綁定次數，提高性能。
本教程操作環境：windows10系統、jquery3.6.0版本、Dell G3電腦。
在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(){
$('.box').bind('click',function(){
$(this).clone().appendTo('.container');
});
});
<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(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});
<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(){
$('.container').delegate('.box','click',function(){
$(this).clone().appendTo('.container:first');
});
});
</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事件代理指的是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
