Menguasai Perwakilan Acara dalam JavaScript: Permudahkan Pengendalian Acara

Perwakilan Acara dalam JavaScript

Delegasi Acara ialah teknik dalam JavaScript di mana pendengar acara tunggal digunakan untuk mengendalikan acara untuk berbilang elemen kanak-kanak. Pendekatan ini memanfaatkan event menggelegak untuk meningkatkan prestasi dan memudahkan kod apabila berurusan dengan elemen yang dicipta secara dinamik atau berbilang elemen yang serupa.

---

1. Apakah itu Perwakilan Acara?

Daripada melampirkan pendengar acara pada elemen anak individu, anda melampirkan pendengar tunggal pada elemen induk. Pendengar ini menangkap peristiwa yang timbul daripada anak-anaknya.

Cara Ia Berfungsi:

1. Tambahkan pendengar acara pada elemen induk.
2. Gunakan sifat event.target untuk mengenal pasti elemen anak yang mencetuskan acara.

---

2. Faedah Delegasi Acara

• Peningkatan Prestasi: Mengurangkan bilangan pendengar acara dalam DOM.
• Elemen Dinamik: Kendalikan acara dengan mudah untuk elemen yang dibuat secara dinamik selepas halaman dimuatkan.
• Kod Lebih Mudah: Memusatkan logik pengendalian acara.

---

3. Contoh Delegasi Acara

Struktur HTML

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

• Acara klik muncul daripada elemen li ke ul.
• Pernyataan if memastikan hanya klik li dikendalikan.

---

4. Mengendalikan Elemen Dinamik

Delegasi acara sesuai untuk mengurus acara pada elemen yang ditambah secara dinamik.

Contoh:

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

---

5. Mencegah Tingkah Laku Yang Tidak Diingini

Gunakan stopPropagation() atau syarat khusus untuk mengehadkan pengendalian acara.

Contoh:

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

---

6. Aplikasi Praktikal

A. Jadual Interaktif

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

B. Pengesahan Borang

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  } else {
    event.stopPropagation(); // Stop propagation for non-LI elements
  }
});

C. Elemen UI Dinamik

<table>





<pre class="brush:php;toolbar:false">const table = document.getElementById("dataTable");

table.addEventListener("click", function(event) {
  if (event.target.tagName === "TD") {
    console.log("Clicked cell:", event.target.textContent);
  }
});

---

7. Kaveat Perwakilan Acara

1. Isu Penyebaran: Berhati-hati dengan stopPropagation() kerana ia boleh mengelakkan menggelegak.
2. Overhed Prestasi: Mewakilkan hanya apabila perlu; elakkan melampirkan satu pendengar pada keseluruhan dokumen melainkan diperlukan.
3. Penyasaran Acara: Pastikan penyasaran yang tepat menggunakan acara.sasaran dan syarat.

---

8. Ringkasan

• Delegasi acara ialah cara yang cekap untuk mengurus acara untuk berbilang elemen menggunakan satu pendengar.
• Ia bergantung pada peristiwa menggelegak dan amat berguna untuk mengendalikan elemen yang ditambah secara dinamik.
• Sentiasa gunakan event.target untuk mengenal pasti elemen khusus yang mencetuskan acara.

Dengan menguasai delegasi acara, anda boleh menulis kod JavaScript yang lebih bersih dan lebih cekap untuk aplikasi web interaktif.

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.

Atas ialah kandungan terperinci Menguasai Perwakilan Acara dalam JavaScript: Permudahkan Pengendalian Acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!