Bagaimanakah anda menambah pendengar acara klik pada berbilang elemen dengan kelas yang sama dalam JavaScript?

Menambahkan Pendengar Acara Klik pada Berbilang Elemen dengan Kelas Yang Sama

Untuk menambah pendengar acara klik pada semua elemen dengan kelas tertentu, anda boleh menggunakan kaedah querySelectorAll() dan bukannya querySelector(). Kaedah querySelector() mengembalikan elemen padanan pertama, manakala querySelectorAll() mengembalikan NodeList bagi semua elemen padanan.

Penyelesaian:

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

Sekarang anda mempunyai NodeList bagi semua pautan padam, anda boleh mengulanginya dan menambah pendengar acara pada setiap satu satu.

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();
        }
    });
}

Dalam pendengar acara, anda boleh menggunakan kata kunci ini untuk merujuk kepada elemen semasa. Ini membolehkan anda mengakses atribut tajuk elemen dan memaparkan mesej pengesahan kepada pengguna.

Nota: Adalah penting untuk menggunakan event.preventDefault() untuk mengelakkan tindakan lalai bagi pautan daripada berlaku jika pengguna mengesahkan pemadaman.

ES6 Versi:

Menggunakan ES6, anda boleh memudahkan kod menggunakan kaedah forEach():

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

Atas ialah kandungan terperinci Bagaimanakah anda menambah pendengar acara klik pada berbilang elemen dengan kelas yang sama dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!