Apakah perbezaan dalam mekanisme tindak balas antara peristiwa menggelegak dan tidak berbuih?

Apakah perbezaan antara peristiwa menggelegak dan peristiwa tidak menggelegak diperlukan contoh kod khusus

Peristiwa itu boleh menjadi tingkah laku interaksi pengguna (seperti klik, menyeret, dll.), atau Ia boleh menjadi gelagat dalaman penyemak imbas atau halaman web (seperti penyiapan pemuatan, perubahan saiz tetingkap, dsb.). Mengikut kaedah penyebaran peristiwa yang berbeza, peristiwa boleh dibahagikan kepada peristiwa menggelegak dan peristiwa bukan gelembung.

Acara menggelegak
Peristiwa menggelegak merujuk kepada peristiwa yang bermula dari sasaran acara dan merambat ke elemen atas langkah demi langkah sehingga ia mencapai nod akar dokumen. Semasa proses penyebaran, pengendali peristiwa unsur induk akan dicetuskan dahulu, kemudian pengendali peristiwa unsur datuk nenek, dan seterusnya, sehingga pengendali peristiwa pada nod akar.

Berikut ialah contoh kod untuk acara menggelegak:

Kod HTML:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

Kod JavaScript:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

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

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

Apabila butang diklik, konsol akan mengeluarkan yang berikut:

按钮被点击
内部div被点击
外部div被点击

Seperti yang dapat dilihat daripada output , menggelegak Peristiwa menyala dahulu pengendali acara klik butang, kemudian pengendali acara klik div dalam, dan akhirnya pengendali acara klik div luar.

Acara tidak menggelegak
Acara tidak menggelegak bermakna acara itu hanya akan dicetuskan pada sasaran acara dan tidak akan merambat ke atas. Dalam erti kata lain, hanya pengendali acara elemen yang diklik akan dilaksanakan.

Berikut ialah contoh kod untuk acara tidak menggelegak:

Kod HTML:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

Kod JavaScript:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

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

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

Apabila butang diklik, konsol hanya akan mengeluarkan yang berikut:

rreee

As boleh dilihat daripada output, Peristiwa tidak menggelegak hanya mencetuskan pengendali acara klik butang.

Ringkasnya, perbezaan utama antara acara menggelegak dan acara bukan gelembung ialah cara acara itu disebarkan. Peristiwa menggelegak akan merambat daripada sasaran acara ke elemen atas, manakala acara tidak menggelegak hanya akan dicetuskan pada sasaran acara. Memahami perbezaan antara kedua-dua acara ini adalah sangat penting untuk mengendalikan penyebaran acara dan mengoptimumkan kesan interaktif halaman.

Atas ialah kandungan terperinci Apakah perbezaan dalam mekanisme tindak balas antara peristiwa menggelegak dan tidak berbuih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!