Apakah maksud proksi acara jquery?

Dalam jquery, proksi acara bermaksud mengikat acara kepada elemen induk dan menunggu acara menggelembung ke elemen melalui DOM sebelum melaksanakannya; proksi acara menggunakan prinsip menggelegak acara untuk menghantar acara kepada elemen. Ditambah pada induk, dengan menentukan sumber acara dan melaksanakan operasi pada elemen anak yang sepadan, ia boleh mengurangkan bilangan pengikatan acara dan meningkatkan prestasi.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Apakah maksud proksi acara jquery

Dalam jQuery, proksi acara bermaksud: mengikat acara kepada elemen induk, dan kemudian menunggu acara itu menggelembung ke elemen melalui DOM sebelum melaksanakannya.

Proksi acara menggunakan prinsip menggelegak acara (acara menggelegak bermakna acara akan dihantar peringkat demi tahap kepada induknya), tambahkan acara kepada induk dan laksanakan tindakan yang sepadan dengan menilai sumber acara. Untuk operasi pada elemen kanak-kanak, proksi acara boleh mengurangkan bilangan pengikatan acara dan meningkatkan prestasi kedua, mereka boleh membenarkan elemen kanak-kanak yang baru ditambah mempunyai operasi yang sama.

Terdapat dua cara untuk mencetuskan acara semasa mendengar acara: menangkap acara dan menggelegak acara. Acara menggelembung dengan lebih pantas dan lebih cekap.

Tangkapan acara: Peristiwa tenggelam kepada unsur keturunan dalam DOM.

Acara menggelegak: Acara menggelegak melalui DOM daripada elemen sumber tempat peristiwa itu berlaku.

jQuery menggunakan acara menggelegak untuk mengendalikan semua acara. Pustaka jQuery menyediakan tiga kaedah untuk mengikat fungsi pengendalian acara elemen, iaitu bind(), live(), dan delegate().

1. Gunakan .bind() untuk mengikat fungsi pemprosesan acara: dua parameter mesti disediakan, yang pertama ialah jenis acara dan yang kedua ialah fungsi pemprosesan acara.

.bind(jenis acara, pemegang acara)

Contohnya:

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

kaedah.bind() hanya sesuai untuk mengikat acara kepada elemen yang telah wujud dalam fungsi pemprosesan DOM. Ini tidak mempunyai kesan pada elemen DOM yang ditambahkan kemudian apabila melalui skrip tindakan.

Bayangkan: Terdapat elemen .box dalam DOM Anda mahu pautan untuk menyalin elemen ini dan menambahkannya pada DOM setiap kali ia diklik. Pertama, kita boleh mengikat pengendali acara klik yang sesuai pada pautan ini. Setiap kali pautan ini diklik, kaedah .clone() akan dipanggil, menyalin elemen kotak dan melampirkannya pada bekas yang sepadan:

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

Jalankan dalam penyemak imbas, hasilnya ialah mengklik pautan ini , elemen akan ditambahkan. Tetapi apabila mengklik pada elemen selain daripada pautan pertama, acara klik tidak akan dilaksanakan.

Oleh itu: peristiwa klik terikat tidak boleh bertindak pada elemen baharu ini yang baru ditambahkan pada DOM. Hanya elemen yang wujud dalam DOM pada masa mengikat acara akan berjaya mengikat acara klik. Peristiwa klik hanya terikat pada elemen pertama, jadi walaupun elemen pertama boleh diklon secara berterusan, tiada satu pun elemen klon boleh dipengaruhi oleh peristiwa klik. Jika anda mahu elemen klon ini dipengaruhi oleh peristiwa klik, anda boleh menggunakan .live() binding.

2. Gunakan .live() untuk mengikat fungsi pengendalian acara

kaedah.live() menyediakan cara yang agak fleksibel untuk menangkap acara. Penggunaannya sangat serupa dengan .bind(). Satu-satunya perbezaan ialah kaedah .live() bukan sahaja berfungsi pada elemen yang wujud pada masa ini dalam DOM, tetapi juga pada elemen yang mungkin wujud pada masa hadapan (dijana secara dinamik).

.live(jenis acara, pemegang acara)

Ubah suai contoh di atas:

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

3. Gunakan .delegate() untuk mengikat fungsi pengendali acara

.delegate(pemilih, jenis acara, pengendali acara)

Ubah suai contoh di atas:

<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>

Kesan pelaksanaan adalah sama seperti mengikat fungsi pengendali acara dengan .live (). Tetapi menggunakan .delegate() untuk mengikat fungsi pengendalian acara adalah lebih cekap daripada menggunakan .live(). Sebahagian daripada kod sumber pustaka jQuery tentang mengikat

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 );
    },

masing-masing menambah baris pada kaedah langsung dan perwakilan Selepas penyemak imbas dijalankan, gunakan .live(), dan dokumen akan muncul. maksudnya, gunakan acara mengikat .live(), sumbernya ialah dokumen. Menggunakan .delegate(), objek muncul, iaitu, menggunakan .delegate() untuk mengikat acara, sumbernya ialah elemen terikat khusus. Oleh itu, menggunakan .delegate() adalah lebih cekap daripada menggunakan .live().

Seperti yang dapat dilihat daripada kod sumber, gunakan .bind() untuk mengikat fungsi pemprosesan acara dan gunakan unbind() untuk membatalkan pengikatan acara.

Gunakan .live() untuk mengikat fungsi pemprosesan acara dan anda boleh menggunakan die() untuk membatalkan pengikatan acara.

Gunakan .delegate() untuk mengikat fungsi pemprosesan acara dan gunakan undelegate() untuk membatalkan pengikatan acara.

Cadangan tutorial video: Tutorial video jQuery

Atas ialah kandungan terperinci Apakah maksud proksi acara jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!