Bagaimana untuk Melaksanakan Pendengar Acara Klik dengan Betul pada Kelas JavaScript?

Melaksanakan Pendengar Acara Klik pada Kelas dalam JavaScript

Dalam JavaScript, pendengar acara ialah kaedah pilihan untuk mengendalikan interaksi pengguna. Apabila cuba mendapatkan atribut daripada elemen yang diklik, pendengar menyediakan pendekatan yang lebih cekap daripada menggunakan pengendali acara tradisional.

Dalam coretan kod yang disediakan:

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

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

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

Isunya terletak pada cara addEventListener diseru. Fungsi pendengar acara myFunction segera dilaksanakan dengan menambahkan tanda kurung selepasnya (myFunction()). Sebaliknya, rujukan fungsi itu sendiri harus dihantar sebagai hujah kedua.

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

Selain itu, getElementsByClassName mengembalikan senarai nod, bukan elemen HTML. Untuk menggunakan pendengar acara pada setiap elemen dalam senarai nod, ia harus diulang ke atas:

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

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

Dalam penyemak imbas dengan sokongan ES6, penyelesaian yang lebih ringkas boleh dicapai menggunakan kaedah forEach:

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

Dengan menangani pelarasan ini, kod kini sepatutnya menangkap atribut elemen yang diklik dengan betul menggunakan pendengar acara JavaScript tanpa menggunakan perpustakaan luaran seperti jQuery.

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