Apakah tangkapan acara menggelegak acara

Acara menggelegak dan menangkap acara merujuk kepada dua cara penyebaran acara yang berbeza semasa mengendalikan acara dalam HTML DOM. Pengenalan terperinci: 1. Acara menggelegak bermakna apabila elemen mencetuskan peristiwa, peristiwa itu akan merambat dari elemen paling dalam ke elemen paling luar. Maksudnya, peristiwa itu mula-mula dicetuskan pada elemen pencetus, dan kemudian menggelegak langkah demi langkah sehingga ia mencapai elemen akar 2. Tangkapan peristiwa adalah proses yang bertentangan Acara bermula dari elemen akar dan ditangkap secara berperingkat langkah sehingga ia mencapai elemen pencetus.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Acara menggelegak dan menangkap acara merujuk kepada dua cara penyebaran acara yang berbeza semasa mengendalikan acara dalam HTML DOM.

Event menggelegak bermaksud apabila elemen mencetuskan peristiwa, peristiwa itu akan merambat dari elemen paling dalam ke elemen paling luar. Iaitu, acara mula-mula menyala pada elemen pencetus dan kemudian menggelembung sehingga mencapai elemen akar.

Event Capturing ialah proses yang bertentangan bermula dari elemen akar dan ditangkap langkah demi langkah ke bawah sehingga mencapai elemen yang mencetuskan acara.

Dalam HTML DOM, secara lalai, acara disebarkan melalui acara menggelegak. Iaitu, acara mula-mula menyala pada elemen pencetus dan kemudian menggelembung sehingga mencapai elemen akar.

Anda boleh menentukan dengan jelas kaedah penyebaran acara melalui kaedah addEventListener. Kaedah addEventListener boleh menerima tiga parameter, iaitu jenis acara yang akan dipantau, fungsi pemprosesan acara dan nilai Boolean yang digunakan untuk menentukan kaedah penyebaran peristiwa. Apabila nilai Boolean yang dihantar adalah benar, ini bermakna penangkapan peristiwa digunakan apabila nilai Boolean yang dihantar adalah palsu atau diabaikan, ini bermakna peristiwa menggelegak digunakan.

Sebagai contoh, kod berikut menunjukkan perbezaan antara menangkap acara dan menggelegak acara:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>
<script>
var outer = document.getElementById(&#39;outer&#39;);
var inner = document.getElementById(&#39;inner&#39;);
var button = document.getElementById(&#39;button&#39;);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 外层元素&#39;);
}, false);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 内层元素&#39;);
}, false);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 按钮&#39;);
}, false);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 外层元素&#39;);
}, true);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 内层元素&#39;);
}, true);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 按钮&#39;);
}, true);
</script>

Selepas menjalankan kod di atas, apabila butang diklik, fasa menangkap acara dan fasa menangkap acara akan dicetuskan dalam urutan Fungsi pengendalian acara dan mengeluarkan maklumat yang sepadan pada konsol.

Atas ialah kandungan terperinci Apakah tangkapan acara menggelegak acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!