Menguasai Acara Bubbling dan Tangkapan dalam JavaScript

Peristiwa Bubbling dan Tangkapan dalam JavaScript

Penyebaran acara dalam JavaScript menerangkan cara peristiwa mengalir melalui DOM selepas dicetuskan. Terdapat dua fasa utama: Event Bubbling dan Event Capturing. Memahami konsep ini adalah penting untuk mengurus pendengar acara dengan berkesan.

---

1. Fasa-fasa Penyebaran Acara

Apabila peristiwa dicetuskan, ia merambat melalui DOM dalam susunan berikut:

1. Fasa Menangkap: Acara bergerak dari akar pokok DOM turun ke elemen sasaran.
2. Fasa Sasaran: Acara mencapai elemen sasaran.
3. Fasa menggelegak: Acara bergerak dari elemen sasaran kembali ke akar.

---

2. Acara menggelegak

Dalam fasa menggelegak, acara bermula pada elemen sasaran dan berbuih melalui nenek moyangnya.

Contoh:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Output apabila mengklik butang:

Child clicked
Parent clicked

• Acara menggelembung dari butang ke div.

Berhenti menggelegak

Gunakan kaedah stopPropagation() untuk menghalang acara daripada disebarkan lebih jauh.

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

3. Tangkapan Acara (Trickling)

Dalam fasa menangkap, acara bergerak dari akar pokok DOM turun ke elemen sasaran.

Contoh:

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Output apabila mengklik butang:

Parent clicked
Child clicked

• Acara ini dirakam oleh ibu bapa sebelum sampai kepada kanak-kanak.

---

4. Membandingkan Bubbling dan Tangkap

Ciri Acara menggelegak Merakam Acara

Feature	Event Bubbling	Event Capturing
Order	From target to ancestors	From root to target
Default Behavior	Enabled	Disabled unless specified
Use Case	Commonly used for delegation	Less commonly used

Pesan Dari sasaran kepada nenek moyang Dari akar ke sasaran Gelagat Lalai Didayakan Dilumpuhkan melainkan dinyatakan Kes Penggunaan Biasa digunakan untuk perwakilan Kurang biasa digunakan

---

5. Delegasi Acara

Delegasi acara memanfaatkan acara menggelegak untuk mengendalikan acara dengan cekap untuk berbilang elemen kanak-kanak.

Contoh:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• Satu pendengar acara pada ul mengendalikan klik untuk semua elemen li.

---

6. Mencegah Gelagat Lalai

Gunakan kaedah preventDefault() untuk menghentikan gelagat lalai sesuatu elemen tanpa menjejaskan penyebaran.

Contoh:

Child clicked
Parent clicked

---

7. Kes Penggunaan Praktikal: Pengesahan Borang

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

8. Ringkasan

• Peristiwa menggelegak menyebarkan peristiwa daripada elemen sasaran ke atas kepada nenek moyang.
• Tangkapan acara menyebarkan acara daripada akar ke bawah kepada elemen sasaran.
• Gunakan stopPropagation() untuk menghentikan penyebaran dan preventDefault() untuk membatalkan tindakan lalai.
• Delegasi acara ialah teknik berkuasa untuk mengurus acara dengan cekap pada elemen dinamik.

Menguasai acara menggelegak dan menangkap memastikan kawalan yang lebih baik ke atas aplikasi dipacu peristiwa dan meningkatkan kecekapan kod.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.