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

Menambahkan Pendengar Acara Klik pada Elemen dengan Kelas Yang Sama

Untuk menambah pendengar acara klik pada semua elemen dengan kelas tertentu, anda boleh gunakan querySelectorAll() dan bukannya querySelector() untuk mendapatkan semula semua elemen yang sepadan.

Kod JavaScript:

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

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 kod ini:

• var deleteLinks = dokumen .querySelectorAll('.delete'); mendapatkan semula semua elemen dengan kelas "padam".
• Gelung untuk berikut berulang melalui senarai elemen.
• Untuk setiap elemen, pendengar acara ditambah untuk mendengar klik acara.
• Jika sahkan("pasti anda mahu memadam " this.title) fungsi mengembalikan false, panggilan event.preventDefault() menghalang gelagat lalai acara klik (seperti menyerahkan borang).

Tambahan Nota:

• Perlu diperhatikan bahawa hanya querySelector() mengembalikan satu elemen, manakala querySelectorAll() mengembalikan NodeList.
• Menggunakan event.preventDefault() sesuai untuk menghalang penyerahan borang atau tindakan lalai lain apabila menggunakan addEventListener().

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!