Bagaimana untuk Menambah Pendengar Acara ke Berbilang Elemen dalam Satu Baris JavaScript?

Menambahkan Pendengar Acara pada Berbilang Elemen dalam Satu Baris

Apabila bekerja dengan berbilang elemen HTML, ia boleh menyusahkan untuk menambah pendengar acara pada setiap seorang secara individu. Nasib baik, terdapat cara yang lebih cekap untuk mencapai perkara ini menggunakan JavaScript.

Pertimbangkan coretan kod berikut:

<p>Example 1:</p>
<pre class="brush:php;toolbar:false">element1.addEventListener("input", function() {
  // this function does stuff 
});

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

Sementara Contoh 1 menambahkan pendengar acara pada satu elemen, Contoh 2 cuba untuk tambahkan pendengar acara kepada berbilang elemen. Walau bagaimanapun, sintaks untuk Contoh 2 adalah salah.

Penyelesaian terletak pada penggunaan kaedah JavaScript forEach(). Katakan anda mempunyai tatasusunan yang mengandungi elemen yang anda ingin tambahkan pendengar acara. Dalam kes itu, anda boleh menggunakan kod berikut:

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

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

Dalam kod ini, querySelectorAll("whatever") mengembalikan tatasusunan elemen yang sepadan dengan pemilih yang ditentukan. Kaedah forEach() kemudian mengulangi setiap elemen dalam tatasusunan dan menambah pendengar acara yang diingini.

Kaedah ini menyediakan cara yang ringkas dan cekap untuk menambah pendengar acara kepada berbilang elemen secara serentak. Dengan menggunakan tatasusunan dan kaedah forEach(), anda boleh mengurangkan lebihan kod dan meningkatkan kecekapan dalam projek JavaScript anda.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Pendengar Acara ke Berbilang Elemen dalam Satu Baris JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!