Am'm în prezent încearcă să scrie ceva JavaScript pentru a obține atributul de clasă care a fost apasat. Știu că pentru a face acest lucru în mod corect, ar trebui să utilizați un ascultător eveniment. Codul meu este după cum urmează:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Mă așteptam să iau o cutie de alertă de fiecare dată când am făcut clic pe una dintre clase să-mi spui atribut, dar din păcate acest lucru nu funcționează. Poate ajuta cineva va rog?
(Notă - I poate destul de ușor de a face acest lucru în "jQuery", dar mi-ar NU cum să utilizați it)
Acest lucru ar trebui să funcționeze. getElementsByClassName
returnează o
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 face looping parte pentru tine, care ai nevoie pentru a face în simple JavaScript.
Dacă aveți ES6 suport puteți înlocui ultima linie cu:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Notă: browsere mai Vechi (cum ar fi IE6, IE7, IE8) nu´suport t getElementsByClassName
și așa se vor întoarce "nedefinit".
EDIT : Rectific
getElementsByClassName
nu returneze un array, dar o HTMLCollection în cele mai multe, sau un NodeList este unele browsere (Mozilla ref). Ambele tipuri sunt Array-Ca, (în sensul că acestea au o lungime de proprietate și obiectele pot fi accesate prin indicele lor), dar nu sunt strict o Matrice sau moștenit dintr-o Matrice. (sensul alte metode care pot fi efectuate pe o Serie nu poate fi efectuată pe aceste tipuri)
Vă mulțumim pentru utilizator @Nemo pentru a evidenția acest lucru și să caut să înțeleg pe deplin.
Acest lucru a fost editat pentru a permite copiilor din clasa țintă pentru a declanșa evenimente. Vedea partea de jos a răspunde pentru detalii.
O alternativă de răspuns pentru a adăuga un ascultător eveniment la o clasă în cazul în care elementele sunt frecvent adăugate și eliminate. Acesta este inspirat de jQuery's " pe " funcție în cazul în care puteți trece de la un selector pentru un copil element care a evenimentului este de a asculta pe.
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
}
});
Vioara:
Acest lucru va asculta pentru clicurile pe copii de "de bază" element și dacă ținta de un click are un părinte potrivite selector, clasa eveniment vor fi tratate. Puteți adăuga și elimina elemente, după cum doriți, fără a fi nevoie pentru a adăuga mai multe faceți clic pe ascultători la elementele individuale. Acest lucru va prinde-le pe toate, chiar și pentru elemente adăugate după acest ascultător a fost adăugat, la fel ca jQuery funcționalitate (care cred că este oarecum similar sub capota).
Acest lucru depinde de evenimente săditor, așa că, dacă ai stopPropagation pe eveniment altă parte, acest lucru poate să nu funcționeze. De asemenea, cel mai apropiat funcția are unele probleme de compatibilitate cu IE aparent (ceea ce nu't?).
Acest lucru ar putea fi făcut într-o funcție dacă aveți nevoie pentru a face acest tip de acțiune a asculta în mod repetat, ca
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: Acest post a fost folosit inițial la meciuri funcția de DOM elementele de pe țintă eveniment, dar acest lucru limitat de obiective de evenimente în direct numai la clasa. Acesta a fost actualizat pentru a utiliza mai apropiat
funcție de schimb, care permite pentru evenimente pe copii de clasa dorită pentru a declanșa evenimente. Original meciuri
cod pot fi găsite în original, vioara:
https://jsfiddle.net/u6oje7af/23/
Puteți folosi codul de mai jos:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);