Bagaimana Mengendalikan Acara untuk Berbilang Elemen dengan Kelas yang Sama dalam JavaScript?

Pengendalian Acara untuk Elemen dengan Kelas Biasa

Dalam aplikasi web, menambahkan pendengar acara pada berbilang elemen dengan kelas yang sama boleh menjadi tugas biasa. Ini membenarkan gelagat piawai merentas elemen yang serupa, seperti gesaan pengesahan untuk pemadaman.

Pendekatan Awal dengan querySelector

Pertimbangkan kod JavaScript berikut yang bertujuan untuk menambah pendengar acara klik pada semua elemen dengan kelas "delete":

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

Walaupun kod ini memulakan pendengar acara untuk satu elemen dengan kelas "delete", ia gagal mendaftarkan pendengar untuk semua elemen tersebut. Had ini timbul daripada penggunaan querySelector, yang hanya mengembalikan elemen padanan pertama.

Penyelesaian dengan querySelectorAll

Untuk melanjutkan acara mendengar berbilang elemen, querySelectorAll harus digunakan. Kaedah ini mengembalikan objek NodeList yang mengandungi semua elemen dengan kelas yang ditentukan. Coretan kod berikut menggambarkan perkara ini:

var deleteLinks = document.querySelectorAll('.delete');

Mengulang dan Menambah Pendengar Acara

Dengan NodeList di tangan, anda kini boleh mengulang elemennya dan menambah pendengar acara secara individu:

for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

Pengendalian Pencegahan Peristiwa

Satu pelarasan adalah untuk menghalang tingkah laku lalai hanya apabila pengesahan palsu. Sebelum ini, returning true telah digunakan, tetapi event.preventDefault() ialah pendekatan yang betul dalam konteks pendengar acara.

Demo dan Pilihan Lanjutan

Tunjuk cara penyelesaian ini boleh didapati di : http://jsfiddle.net/Rc7jL/3/.

Selain itu, ambil perhatian bahawa versi ES6 wujud, yang menggunakan Array.prototype.forEach lelaran dan rentetan templat untuk kebolehbacaan kod yang dipertingkatkan.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Acara untuk Berbilang Elemen dengan Kelas yang Sama dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!