jquery事件代理指的是什么

這篇文章主要介紹“jquery事件代理指的是什么”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“jquery事件代理指的是什么”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比崇川網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式崇川網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋崇川地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

在jquery中，事件代理的意思是把事件綁定到父級元素，等待事件通過DOM冒泡到該元素時再執(zhí)行的行為；事件代理就是利用事件冒泡的原理把事件加到父級上，通過判斷事件來源，執(zhí)行相應(yīng)的子元素的操作，可以極大減少事件綁定次數(shù)，提高性能。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery事件代理的意思

在jQuery中，事件代理是指：把事件綁定到父級元素，然后等待事件通過DOM冒泡到該元素時再執(zhí)行。

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

在事件偵聽過程中有兩種觸發(fā)事件的方式：事件捕獲和事件冒泡。事件冒泡更快，效率更高。

事件捕獲：事件在DOM中向后代元素下沉。

事件冒泡：事件從發(fā)生事件的源元素通過DOM向上冒泡。

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

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

.bind(event type,event handle)

如：

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

.bind()方法僅適用于為DOM中已經(jīng)存在的元素綁定事件處理函數(shù)。對于后來通過操作腳本時添加的DOM元素，則不起作用。

設(shè)想：在DOM中有一個.box元素，你希望某個鏈接在每次被單機(jī)時復(fù)制這個元素，并把它添加到DOM中。首先，我們可以為這個鏈接綁定一個適當(dāng)?shù)腸lick事件處理函數(shù)。每單擊這個鏈接一次，.clone()方法就會調(diào)用一次，復(fù)制box元素并把它追加到相應(yīng)的容器中：

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

在瀏覽器運(yùn)行，結(jié)果是單擊這個鏈接，會追加元素。但是單擊除了第一個鏈接的元素時，并不會執(zhí)行click事件。

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

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

.live()方法提供了一種相當(dāng)靈活地捕獲事件的方式。它的用法與.bind()極為相似。唯一不同點(diǎn)是.live()方法不僅作用于DOM中當(dāng)前存在的元素，還作用于將來可能存在（動態(tài)生成）的元素。

.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()綁定事件處理函數(shù)

.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()綁定事件處理函數(shù)執(zhí)行效果一樣。但是用.delegate()綁定事件處理函數(shù)要比用.live()效率更高。jQuery庫有關(guān)綁定的部分源碼

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方法內(nèi)增加了一行，瀏覽器運(yùn)行后，使用.live()，彈出是document,也就是說用.live()綁定事件，它的源頭是document。使用.delegate()，彈出的是object,也就是說用.delegate()綁定事件，它的源頭是具體綁定的元素。因此，使用.delegate()要比使用.live()效率更高。

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

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

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

關(guān)于“jquery事件代理指的是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

網(wǎng)頁題目：jquery事件代理指的是什么
當(dāng)前網(wǎng)址：http://chinadenli.net/article26/ppcpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站營銷、建站公司、電子商務(wù)、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jquery事件代理指的是什么

jquery事件代理的意思