Memahami dan melaksanakan prinsip dan kaedah menggelegak acara dan menangkap peristiwa

Prinsip dan pelaksanaan acara menggelegak dan menangkap peristiwa

Mengelegak peristiwa (Event Bubbling) dan menangkap acara (Memerangkap Peristiwa) ialah dua mekanisme berbeza dalam JavaScript untuk mengendalikan acara DOM (Model Objek Dokumen). Memahami prinsip dan pelaksanaannya boleh membantu kami memahami dan mengendalikan acara dengan lebih baik.

Prinsip acara menggelegak:
Peristiwa menggelegak bermaksud bahawa apabila peristiwa tertentu berlaku pada elemen DOM tertentu, jika elemen itu mentakrifkan fungsi pengendali untuk acara tersebut, acara itu akan dicetuskan pada elemen itu, dan kemudian Bubbles sehingga ke elemen induk elemen sehingga fungsi pengendali elemen akar dokumen dicetuskan.

Kaedah pelaksanaan:
Dalam JavaScript, kami boleh menggunakan kaedah addEventListener untuk menambah pendengar acara pada elemen untuk mencapai acara menggelegak.
Berikut ialah contoh:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
});

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
});

btn.addEventListener('click', function(event) {
  console.log('按钮被点击！');
  event.stopPropagation(); // 阻止事件冒泡
});

Dalam kod di atas, apabila kita mengklik butang, acara menggelegak akan dicetuskan langkah demi langkah ke atas dari elemen paling dalam, mula-mula melaksanakan pengendali acara klik butang, dan kemudian acara div dalam Fungsi pengendali, dan akhirnya fungsi pengendali acara div luar.

Prinsip tangkapan peristiwa:
Tangkapan peristiwa adalah bertentangan dengan tangkapan peristiwa bermakna bermula dari elemen akar dokumen dan turun melalui setiap elemen pepohon DOM sehingga peristiwa tertentu dicetuskan.

Kaedah pelaksanaan:
Begitu juga, kita boleh menggunakan kaedah addEventListener untuk menambah pendengar acara pada elemen untuk mencapai penangkapan acara.
Berikut ialah contoh:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击！');
}, true);

Dalam kod di atas, apabila kita mengklik butang, acara akan bermula dari elemen akar dokumen dan dicetuskan langkah demi langkah ke bawah, mula-mula melaksanakan pengendali acara div luar, dan kemudian div dalam Fungsi pengendali acara, dan akhirnya fungsi pengendali acara klik pada butang dilaksanakan.

Ringkasan:
Acara menggelegak dan tangkapan peristiwa ialah dua mekanisme berbeza untuk mengendalikan acara DOM dalam JavaScript Ia menyebarkan peristiwa dalam arah yang berbeza di sepanjang pepohon DOM. Peristiwa menggelegak bermula dari elemen pencetus dan buih sehingga elemen punca dokumen penangkapan acara bermula dari elemen akar dokumen dan merambat ke elemen pencetus. Kita boleh menggunakan kaedah addEventListener untuk menambah pendengar acara pada elemen dan menetapkan sama ada untuk menggunakan penangkapan peristiwa atau menggelegak dalam parameter ketiga.

Atas ialah kandungan terperinci Memahami dan melaksanakan prinsip dan kaedah menggelegak acara dan menangkap peristiwa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!