Bagaimana untuk Melampirkan Pendengar Acara Klik dengan Betul pada Berbilang Elemen dengan Kelas yang Sama dalam JavaScript?

JavaScript Event Listener untuk Klik pada Kelas

Untuk melampirkan pendengar acara klik pada kelas, anda boleh menggunakan kaedah addEventListener(). Kaedah ini memerlukan tiga hujah:

• Jenis acara (cth., 'klik')
• Fungsi pendengar
• Bendera tangkapan pilihan (biasanya palsu)

Dalam contoh anda, anda menggunakan kaedah addEventListener() dengan betul. Walau bagaimanapun, terdapat dua isu:

1. Kesilapan Pemilihan Elemen

Anda memilih elemen kelas menggunakan document.getElementsByClassName("classname"), yang mengembalikan HTMLCollection atau NodeList (bergantung pada pelayar). Ini bukan tatasusunan, jadi anda tidak boleh menggunakan tatatanda kurungan tatasusunan untuk melampirkan terus pendengar acara pada setiap elemen kelas.

2. Ralat Fungsi Pendengar Acara

Dalam fungsi pendengar acara anda, anda memanggilnya apabila anda melampirkannya pada elemen kelas. Ini bermakna fungsi itu dilaksanakan serta-merta apabila pendengar ditambah. Sebaliknya, anda harus memasukkan fungsi sebagai rujukan tanpa memanggilnya:

classname.addEventListener('click', myFunction, false);

Kod Dibetulkan

Berikut ialah kod yang diperbetulkan:

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Kod ini kini akan menambah pendengar acara dengan betul pada setiap elemen kelas dan mencetuskan fungsi yang disediakan apabila elemen diklik, memaparkan elemen nilai atribut data-myattribute dalam makluman.

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