Mengapakah `classname.addEventListener(\'click\', myFunction(), false);` Berfungsi untuk Menambah Pendengar Acara pada Kelas?

Pendengar Acara untuk Kelas: Panduan Praktikal

Dalam usaha untuk menangkap nilai atribut kelas apabila klik, anda mungkin menghadapi masalah dengan kod JavaScript anda. Khususnya, line classname.addEventListener('click', myFunction(), false); gagal mendaftarkan pendengar acara pada elemen.

Untuk menangani masalah ini, mari analisa kod langkah demi langkah:

1. getElementsByClassName: Kaedah ini memilih elemen dengan betul dengan nama kelas yang ditentukan. Walau bagaimanapun, ia tidak mengembalikan tatasusunan tetapi objek seperti Tatasusunan yang dipanggil HTMLCollection.
2. addEventListener: Kaedah ini mengambil tiga parameter: (a) jenis acara (dalam kes ini, 'klik' ), (b) fungsi pendengar peristiwa dan (c) fasa tangkapan (biasanya palsu untuk peristiwa menggelegak). Dalam kod, myFunction() dilaksanakan serta-merta apabila kaedah addEventListener digunakan, menghantar hasil panggilan fungsi sebagai pendengar acara. Ini tidak betul.
3. Fungsi: Fungsi tanpa nama myFunction mengambil atribut "data-myattribute" dan memaparkannya dalam kotak amaran. Bahagian kod ini betul.

Kod Dibetulkan:

Untuk menangani isu ini, kita perlu melampirkan pendengar acara dengan betul pada setiap elemen yang dikembalikan oleh getElementsByClassName . 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);
}

Penjelasan Pembetulan:

1. Objek seperti Array: Kami menyimpan HTMLCollection dalam elemen berubah menjadi lebih baik penggunaan.
2. Gelung: Untuk melampirkan pendengar pada setiap elemen, kami mengulangi elemen objek seperti Tatasusunan menggunakan gelung.
3. EventListener: Sintaks yang betul untuk menambah pendengar acara digunakan, menghantar myFunction sebagai pendengar.

Dalam ES6, penambahan gelung dan pendengar acara boleh dicapai dengan lebih ringkas:

Array.from(elements).forEach(function(element) {
  element.addEventListener('click', myFunction);
});

Untuk pelayar lama, seperti IE6-8, pertimbangkan untuk menyemak kewujudan getElementsByClassName sebelum menggunakannya.

Atas ialah kandungan terperinci Mengapakah `classname.addEventListener(\'click\', myFunction(), false);` Berfungsi untuk Menambah Pendengar Acara pada Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!