Bagaimana untuk Melampirkan Pendengar Acara pada Berbilang Elemen dalam JavaScript dengan Cekap?

Menambahkan Pendengar Acara kepada Pelbagai Elemen Dengan Mudah

Soalan:

Adakah terdapat cara yang berkesan untuk melampirkan pendengar acara kepada berbilang elemen secara serentak, mengelakkan keperluan untuk pengendalian acara berasingan untuk setiap elemen?

Contoh:

Secara tradisinya, pendengar acara ditambah secara individu:

element1.addEventListener("input", function() {
  // this function does stuff
});

element2.addEventListener("input", function() {
  // this function does stuff
});

Jawapan:

Dalam JavaScript, anda boleh menggunakan kaedah forEach() pada tatasusunan elemen untuk mencipta pendengar acara bagi setiap elemen dalam satu baris kod.

Penyelesaian:

Untuk mencapai ini, cipta tatasusunan yang mengandungi elemen anda:

let elementsArray = document.querySelectorAll("whatever");

Kemudian, gunakan kaedah forEach() untuk mengulang melalui tatasusunan dan tambahkan pendengar acara pada setiap elemen:

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        // This function does stuff
    });
});

Pendekatan ini menyediakan cara yang ringkas dan cekap untuk menambahkan pendengar acara pada berbilang elemen, memperkemas kod pengendalian acara anda.

Atas ialah kandungan terperinci Bagaimana untuk Melampirkan Pendengar Acara pada Berbilang Elemen dalam JavaScript dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!