Bagaimana untuk Menambahkan Pendengar Acara kepada Berbilang Elemen dengan Kelas yang Sama dalam JavaScript?

Menambahkan Pendengar Acara pada Berbilang Elemen dengan Kelas Yang Sama

Dalam pembangunan web, selalunya perlu menambah pendengar acara kepada berbilang elemen dengan kelas yang sama. Ini boleh dicapai menggunakan kaedah querySelectorAll() JavaScript.

Masalah Awal:

Coretan kod yang disediakan cuba menambah pendengar acara kepada semua elemen dengan "padam" kelas. Walau bagaimanapun, ia hanya menambahkan pendengar kepada elemen pertama dengan kelas itu, walaupun gelagat yang dimaksudkan ialah menambahkannya pada semua elemen tersebut.

Penyelesaian:

Kepada menyelesaikan isu ini, anda perlu menggunakan querySelectorAll() dan bukannya querySelector() untuk memilih semua elemen dengan kelas "padam". querySelector() hanya mengembalikan elemen padanan pertama, manakala querySelectorAll() mengembalikan NodeList yang mengandungi semua elemen yang sepadan.

Kod yang disemak:

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

Dengan kod ini, pendengar acara berjaya ditambahkan pada setiap elemen dengan kelas "padam".

Lain-lain Pertimbangan:

• Perlu diperhatikan bahawa return false/true hanya berguna untuk pengendali acara yang terikat dengan onclick = function() {...}. Untuk addEventListening, event.preventDefault() harus digunakan.
• Kod ES5 di atas boleh dibuat lebih bersih dan selamat menggunakan Array.prototype.forEach lelaran dalam ES6:

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 Bagaimana untuk Menambahkan Pendengar Acara kepada Berbilang Elemen dengan Kelas yang Sama dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!