Bagaimanakah Saya Boleh Menambah Pendengar Acara dengan Cekap pada Elemen dengan Kelas Khusus dalam JavaScript?

Pendengar Acara untuk Klik Kelas dalam JavaScript

Dalam JavaScript, pendengar acara memainkan peranan penting dalam menangkap interaksi pengguna. Salah satu tugas yang mungkin anda hadapi ialah mendengar klik pada elemen dengan kelas tertentu.

Untuk memastikan prestasi optimum, adalah disyorkan untuk mengelak daripada menggunakan jQuery untuk tujuan ini dan sebaliknya bergantung pada JavaScript tulen. Walau bagaimanapun, isu biasanya timbul apabila cuba menyediakan pendengar acara untuk klik kelas: kod mungkin tidak mencetuskan makluman yang dimaksudkan.

Punca Masalah

Isu selalunya terletak pada penggunaan getElementsByClassName yang salah. Kaedah ini mengembalikan objek seperti Array, yang bermaksud ia menyerupai tatasusunan tetapi tidak mempunyai semua kaedah tatasusunan terbina dalam. Percubaan untuk menambah pendengar acara terus kepada hasil getElementsByClassName tidak akan berfungsi seperti yang dijangkakan.

Penyelesaian Swift

Untuk menyelesaikan masalah ini, anda boleh mengulangi objek seperti Array dan menambah pendengar acara kepada setiap elemen individu:

// Retrieve all elements with the "classname" class
var elements = document.getElementsByClassName("classname");

// Define the event handler function
var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

// Add event listeners to each element
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Sebagai alternatif, jika anda mempunyai sokongan ES6, anda boleh menggunakan kaedah forEach() untuk menyelaraskan kod:

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

Nota Tambahan

Adalah penting untuk ambil perhatian bahawa penyemak imbas dengan sokongan terhad, seperti IE6, IE7 dan IE8, mungkin tidak menyokong getElementsByClassName. Dalam kes sedemikian, ia akan kembali tidak ditentukan.

Selain itu, apabila menggunakan pendengar acara, adalah penting untuk mempertimbangkan konteks fungsi pengendali acara. Dalam kod yang disediakan, ini merujuk kepada elemen yang telah diklik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Pendengar Acara dengan Cekap pada Elemen dengan Kelas Khusus dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!