Ketahui Delegasi Acara dalam JavaScript seperti anda 5

Melampirkan pendengar acara tunggal pada elemen induk, bukannya menambah pendengar berasingan kepada setiap kanak-kanak, ialah teknik yang dikenali sebagai delegasi acara. Ini berfungsi kerana acara menggelegak, di mana peristiwa (seperti satu klik) menggerakkan pepohon DOM daripada anak kepada induk. Dengan mengendalikan acara di peringkat ibu bapa, anda boleh menjimatkan memori dan meningkatkan prestasi, terutamanya apabila berurusan dengan banyak elemen atau elemen kanak-kanak yang ditambah secara dinamik.

Bagaimana Ia Berfungsi?

Apabila peristiwa dicetuskan pada elemen kanak-kanak (contohnya, satu klik), ia tidak berhenti di situ. Peristiwa menggelembung ke induknya, dan seterusnya, ke atas pepohon DOM sehingga ia mencapai akar dokumen. Delegasi acara mengambil kesempatan daripada ini dengan meletakkan pendengar acara pada nenek moyang yang sama bagi semua elemen kanak-kanak sasaran. Nenek moyang ini mendengar peristiwa yang timbul daripada unsur kanak-kanak dan mengendalikannya berdasarkan keadaan tertentu, seperti jenis acara atau elemen kanak-kanak tertentu yang mencetuskan peristiwa itu.

Contoh Delegasi Acara

Katakanlah kami mempunyai senarai butang dan kami mahu mengendalikan acara klik untuk setiap butang. Daripada menambahkan pendengar acara klik pada setiap butang, kami boleh menambahkan pendengar tunggal pada elemen induk mereka.

<ul id="buttonList">
  <li><button data-action="delete">Delete</button></li>
  <li><button data-action="edit">Edit</button></li>
  <li><button data-action="view">View</button></li>
</ul>

Sekarang, daripada menambah pendengar acara klik pada setiap butang, kami melampirkan pendengar tunggal kepada ibu bapa

elemen.


document.getElementById("buttonList").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");

    if (action === "delete") {
      console.log("Deleting item...");
    } else if (action === "edit") {
      console.log("Editing item...");
    } else if (action === "view") {
      console.log("Viewing item...");
    }
  }
});

Pendengar acara klik dilampirkan pada

unsur (induk). Di dalam pengendali acara, kami menyemak sama ada elemen yang diklik ialah butang menggunakan event.target.tagName === "BUTTON". Ini memastikan bahawa kami hanya membalas klik butang. Kami menggunakan atribut data-action untuk menentukan tindakan yang perlu diambil (padam, edit atau lihat). Pendekatan ini lebih cekap dan berskala, terutamanya jika kami mempunyai banyak butang atau menambah butang baharu secara dinamik.

Satu lagi Contoh dengan Elemen Dinamik

Jika senarai butang dijana secara dinamik (cth., menambahkan butang baharu melalui JavaScript), delegasi acara masih akan berfungsi dengan sempurna tanpa perlu melampirkan semula pendengar acara.


const ul = document.getElementById("buttonList");

// Dynamically adding new buttons
const newButton = document.createElement("li");
newButton.innerHTML = '<button data-action="share">Share</button>';
ul.appendChild(newButton);

// The same event listener on the parent will handle the new button
ul.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");
    console.log(action + " button clicked.");
  }
});

Event Bubbling: Delegasi acara berfungsi kerana acara menggelegak, di mana peristiwa yang dicetuskan pada elemen kanak-kanak merebak sehingga nenek moyangnya.

Cekap untuk Kandungan Dinamik: Memandangkan kami melampirkan pendengar acara kepada induk, ia berfungsi untuk elemen yang ditambahkan kemudian pada DOM.

Prestasi: Mengurangkan overhed untuk melampirkan dan mengurus berbilang pendengar acara, terutamanya dengan sejumlah besar elemen kanak-kanak.

Delegasi acara ialah teknik penting untuk pengendalian acara DOM yang cekap, terutamanya apabila berurusan dengan banyak elemen atau kandungan dinamik.

Atas ialah kandungan terperinci Ketahui Delegasi Acara dalam JavaScript seperti anda 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!