I'm saat ini mencoba untuk menulis beberapa JavaScript untuk mendapatkan atribut dari kelas yang telah diklik. Saya tahu bahwa untuk melakukan hal ini dengan cara yang benar, saya harus menggunakan event listener. Kode saya adalah sebagai berikut:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Saya mengharapkan untuk mendapatkan kotak peringatan setiap kali saya mengklik salah satu kelas untuk menceritakan atribut, tetapi sayangnya ini tidak bekerja. Ada yang bisa membantu tolong?
(Catatan - I cukup dapat dengan mudah melakukan hal ini dalam jQuery
tapi aku akan TIDAK ingin menggunakan it)
Ini harus bekerja. getElementsByClassName
kembali array Array-seperti objek(lihat mengedit) dari unsur-unsur yang cocok dengan kriteria.
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
jQuery melakukan perulangan untuk anda, yang perlu anda lakukan dalam JavaScript biasa.
Jika anda memiliki ES6 dukungan anda dapat mengganti baris terakhir anda dengan:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Catatan: browser yang lebih Tua (seperti IE6, IE7, IE8) don´t dukungan getElementsByClassName
dan begitu mereka kembali undefined
.
EDIT : Koreksi
getElementsByClassName
tidak mengembalikan array, tapi HTMLCollection di sebagian besar, atau NodeList adalah beberapa browser (Mozilla ref). Kedua jenis ini adalah Hotel-Suka, (yang berarti bahwa mereka memiliki panjang properti dan benda-benda yang dapat diakses melalui indeks mereka), tapi tidak benar-benar sebuah Array atau diwariskan dari Array. (berarti metode lain yang dapat dilakukan pada Array tidak dapat dilakukan pada jenis-jenis)
Terima kasih untuk pengguna @Nemo untuk menunjukkan ini dan setelah saya menggali lebih dalam untuk memahami sepenuhnya.
Hal ini telah diedit untuk memungkinkan anak-anak dari kelas target untuk memicu peristiwa. Lihat di bawah untuk rincian.
Alternatif jawaban untuk menambahkan event listener untuk kelas di mana barang-barang yang sering ditambahkan dan dihapus. Hal ini terinspirasi oleh jQuery's pada
fungsi di mana anda dapat lulus dalam pemilih untuk elemen anak bahwa kegiatan mendengarkan pada.
var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children
base.addEventListener('click', function(event) {
// find the closest parent of the event target that
// matches the selector
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// handle class event
}
});
Biola:
Ini akan mendengarkan untuk klik pada anak-anak dari base
elemen dan jika target klik memiliki orangtua yang cocok dengan selector, class acara yang akan ditangani. Anda dapat menambah dan menghapus elemen yang anda suka tanpa harus menambahkan lebih banyak klik pendengar untuk masing-masing elemen. Ini akan menangkap mereka semua bahkan untuk unsur-unsur yang ditambahkan setelah ini pendengar yang ditambahkan, seperti fungsi jQuery (yang saya bayangkan ini agak mirip di bawah kap mesin).
Hal ini tergantung pada peristiwa yang menyebarkan, jadi jika anda stopPropagation
pada acara di tempat lain, ini mungkin tidak bekerja. Juga, terdekat
fungsi memiliki beberapa masalah kompatibilitas dengan IE rupanya (apa yang doesn't?).
Ini bisa dibuat menjadi sebuah fungsi jika anda perlu untuk melakukan jenis tindakan mendengarkan berulang-ulang, seperti
function addChildEventListener(base, eventName, selector, handler) {
base.addEventListener(eventName, function(event) {
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// passes the event to the handler and sets `this`
// in the handler as the closest parent matching the
// selector from the target element of the event
handler.call(closest, event);
}
});
}
=========================================
EDIT: posting Ini awalnya digunakan pertandingan
fungsi untuk elemen DOM pada acara target, tapi ini dibatasi target dari acara langsung kelas saja. Ini telah diperbarui untuk menggunakan terdekat
fungsi alih, yang memungkinkan untuk acara pada anak-anak dari kelas yang diinginkan untuk memicu peristiwa juga. Asli pertandingan
kode dapat ditemukan di asli biola:
https://jsfiddle.net/u6oje7af/23/
Anda dapat menggunakan kode di bawah ini:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);