Kes aplikasi praktikal menggelegak acara dan menangkap peristiwa dalam pembangunan bahagian hadapan

Aplikasi kes menggelegak acara dan menangkap acara dalam pembangunan bahagian hadapan

Mengelegak acara dan menangkap acara ialah dua mekanisme penyampaian acara yang sering digunakan dalam pembangunan bahagian hadapan. Dengan memahami dan menggunakan kedua-dua mekanisme ini, kami boleh mengendalikan gelagat interaktif dalam halaman dengan lebih fleksibel dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan konsep menggelegak acara dan menangkap peristiwa, dan menggabungkannya dengan contoh kod khusus untuk menunjukkan kes aplikasinya dalam pembangunan bahagian hadapan.

1. Konsep acara menggelegak dan menangkap peristiwa

1. Event menggelegak

Event menggelegak bermaksud bahawa selepas sesuatu peristiwa elemen dicetuskan, acara itu akan menggelegak dan meneruskannya ke elemen induk, sehingga diserahkan kepada elemen akar dokumen (dokumen). Dalam erti kata lain, jika elemen mencetuskan peristiwa, peristiwa itu akan diproses dalam elemen induk elemen, elemen induk unsur induk dan sehingga ke elemen akar dokumen.

2. Event Capturing

Event Capturing hanyalah bertentangan dengan event bubbling Ia merujuk kepada menangkap peristiwa bermula dari elemen akar dokumen dan bergerak ke bawah sehingga elemen yang mencetuskan acara. Dalam erti kata lain, apabila elemen mencetuskan peristiwa, peristiwa itu akan ditangkap bermula dari elemen akar dokumen dan kemudian dihantar ke tahap di mana elemen itu berada.

2. Kes aplikasi menggelegak acara dan menangkap acara

1. Delegasi Acara

Delegasi acara ialah acara yang mewakilkan acara kepada elemen keturunannya dengan mengikat pendengar acara kepada elemen induk. Dengan mengikat pendengar acara kepada elemen induk, kami tidak perlu menambah pendengar berasingan untuk setiap elemen keturunan, sekali gus meningkatkan prestasi dan kebolehselenggaraan kod. Di bawah mekanisme menggelegak acara, kami boleh memintas semua peristiwa yang dicetuskan dan melakukan pemprosesan khusus berdasarkan sumber pencetus yang berbeza.

Struktur HTML adalah seperti berikut:

<div id="parent">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

Kod JavaScript adalah seperti berikut:

var parent = document.getElementById('parent');

parent.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    console.log('你点击了按钮', e.target.innerHTML);
  }
});

Dalam kod di atas, kami mengikat acara klik pada elemen induk #parent</ kod> Pendengar, apabila butang diklik, acara akan menggelembung ke elemen induk dan mencetuskan fungsi panggil balik acara <code>klik. Menggunakan atribut target objek acara (e), kita boleh mendapatkan elemen sumber pencetus dan memprosesnya dengan sewajarnya. #parent绑定了click事件监听器，当点击按钮时，事件将冒泡至父元素，并触发click事件的回调函数。利用事件对象（e）的target属性，我们可以获取到触发源元素，并进行相应的处理。

2. 事件代理（Event Proxy）

事件代理是一种通过在冒泡或捕获阶段内截获事件，并根据条件来阻止或修改事件的传递或处理过程。在事件捕获的机制下，我们可以在某一特定层级上截获事件，并做出相应的处理。

HTML结构如下所示：

<div id="container">
  <div id="box1"></div>
  <div id="box2">
    <button>按钮</button>
  </div>
</div>

JavaScript代码如下所示：

var container = document.getElementById('container');

container.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    console.log('你点击了按钮');
    e.stopPropagation();
  }
});

上述代码中，我们通过对容器元素#container绑定了click事件监听器。当点击按钮时，事件将进行捕获阶段，委托的事件处理程序将拦截并处理该事件。通过调用事件对象（e）的stopPropagation()

Proksi Acara

Proksi Acara ialah proses yang memintas peristiwa semasa fasa menggelegak atau menangkap dan menyekat atau mengubah suai penghantaran atau pemprosesan acara berdasarkan syarat. Di bawah mekanisme penangkapan peristiwa, kita boleh memintas peristiwa pada tahap tertentu dan memprosesnya dengan sewajarnya. 🎜🎜Struktur HTML adalah seperti berikut: 🎜rrreee🎜Kod JavaScript adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami mengikat acara klik pada elemen kontena #container kod> pendengar. Apabila butang diklik, acara akan melalui fasa tangkapan dan pengendali acara yang diwakilkan memintas dan mengendalikan acara tersebut. Dengan memanggil kaedah <code>stopPropagation() objek acara (e), kita boleh menghalang acara daripada menggelegak ke atas. 🎜🎜3. Ringkasan🎜🎜Acara menggelegak dan menangkap acara adalah konsep yang sangat penting dalam pembangunan bahagian hadapan. Melalui pengenalan dua kes aplikasi dan contoh kod khusus perwakilan acara dan proksi acara, kami boleh memahami dan menggunakan kedua-dua mekanisme ini dengan lebih mendalam serta meningkatkan prestasi dan kebolehselenggaraan kod tersebut. Dalam projek sebenar, kami boleh memilih mekanisme penyampaian acara yang sesuai berdasarkan keperluan dan senario khusus untuk mencapai pengalaman pengguna yang lebih baik. 🎜

Atas ialah kandungan terperinci Kes aplikasi praktikal menggelegak acara dan menangkap peristiwa dalam pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!