Konsep dan fungsi acara menggelegak dan delegasi acara

Apakah acara menggelegak dan delegasi acara JS? Artikel ini akan memperkenalkan kedua-dua konsep secara terperinci dan menyediakan contoh kod khusus untuk menerangkan prinsip penggunaan dan pelaksanaannya.

1. Acara menggelegak

Acara menggelegak bermakna apabila peristiwa (seperti peristiwa klik) berlaku pada elemen, jika elemen itu mentakrifkan pengendali acara, peristiwa itu akan dicetuskan terlebih dahulu, dan kemudian peristiwa itu akan disebarkan dari elemen semasa ke peringkat elemen induk mengikut tahap sehingga ia mencapai elemen akar dokumen.

Mekanisme menggelegak acara membolehkan kami menambahkan pengendali acara yang sama dengan mudah kepada berbilang elemen anak unsur induk tanpa perlu menentukan pengendali acara berasingan untuk setiap elemen anak. Ini memudahkan kod dan menjadikannya lebih boleh diselenggara.

Berikut ialah contoh kod acara menggelegak:

Kod HTML:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

Kod JS:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

Dalam kod di atas, apabila kita mengklik pada elemen kanak-kanak 1 atau elemen kanak-kanak 2, konsol akan mengeluarkan secara bergilir:

触发子元素1的点击事件
触发父元素的点击事件

Pengendali acara elemen induk hanya akan dipecat apabila acara itu menggelegak ke elemen induk. Hentikan acara daripada menggelegak dengan menelefon

.

event.stopPropagation()2. Delegasi Acara

Delegasi acara merujuk kepada mengikat pengendali acara kepada elemen induk dan menentukan sama ada untuk melakukan operasi yang sepadan dengan menilai sasaran asal acara (event.target).

Kelebihan delegasi acara ialah apabila elemen anak baharu ditambahkan pada elemen induk, tidak perlu mengikat pengendali acara kepada elemen anak baharu secara berasingan, tetapi acara dikendalikan terus melalui elemen induk. Ini boleh mengurangkan bilangan pengendali acara dan meningkatkan prestasi.

Berikut ialah contoh kod delegasi acara:

Kod HTML:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

Kod JS:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

Dalam kod di atas, apabila kita mengklik mana-mana elemen li, konsol akan mengeluarkan teks kandungan item yang diklik . Tidak kira berapa banyak elemen li yang ditambahkan kemudiannya, peristiwa kliknya akan dikendalikan oleh elemen induk.

Prinsip delegasi acara dilaksanakan melalui acara menggelegak. Acara mula-mula menggelembung ke elemen induk, dan kemudian dinilai berdasarkan sasaran asal acara untuk menentukan sama ada tindakan yang sepadan perlu dilakukan.

Ringkasan:

Acara menggelegak dan delegasi acara ialah konsep penting yang berkaitan dengan pemprosesan acara dalam JS. Acara menggelegak membolehkan kami menambahkan pengendali acara yang sama dengan mudah kepada berbilang elemen anak unsur induk, meningkatkan kebolehgunaan semula kod delegasi acara mengikat pengendali acara kepada elemen induk, berdasarkan sasaran asal acara tersebut operasi yang sepadan, meningkatkan prestasi dan mengurangkan jumlah kod. Dalam pembangunan sebenar, anda boleh menulis kod yang elegan dan cekap dengan menggunakan acara menggelegak dan delegasi acara dengan sewajarnya mengikut keperluan anda.

Atas ialah kandungan terperinci Konsep dan fungsi acara menggelegak dan delegasi acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!