Ik'ben momenteel aan het proberen om wat JavaScript te schrijven om het attribuut te krijgen van de klasse waarop geklikt is. Ik weet dat om dit op de juiste manier te doen, ik een event listener moet gebruiken. Mijn code is als volgt:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Ik verwachtte een alert box te krijgen elke keer als ik op een van de classes klikte om me het attribuut te vertellen maar helaas werkt dit niet. Kan iemand mij helpen alstublieft?
(Note - Ik kan dit vrij gemakkelijk doen in jQuery
maar ik zou NIET willen gebruiken)
Dit zou moeten werken. getElementsByClassName
geeft een array Array-achtig object(zie edit) van de elementen die voldoen aan de criteria.
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 doet het looping gedeelte voor je, wat je in gewoon JavaScript moet doen.
Als je ES6 ondersteuning hebt, kun je je laatste regel vervangen door:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Opmerking: Oudere browsers (zoals IE6, IE7, IE8) ondersteunen getElementsByClassName
niet en geven dus undefined
terug.
EDIT : Correctie
getElementsByClassName
retourneert geen array, maar een HTMLCollection in de meeste browsers, of een NodeList in sommige browsers (Mozilla ref). Beide types zijn Array-Like, (wat betekent dat ze een lengte-eigenschap hebben en de objecten kunnen worden benaderd via hun index), maar zijn niet strikt een Array of geërfd van een Array. (wat betekent dat andere methoden die op een Array kunnen worden uitgevoerd, niet op deze types kunnen worden uitgevoerd)
Met dank aan gebruiker @Nemo om me hierop te wijzen en me erin te laten graven om het volledig te begrijpen.
Dit is bewerkt zodat kinderen van de doelklasse de gebeurtenissen kunnen triggeren. Zie onderaan het antwoord voor details.
Een alternatief antwoord om een event listener toe te voegen aan een klasse waar vaak items worden toegevoegd en verwijderd. Dit is geïnspireerd door jQuery's on
functie waar je een selector kunt doorgeven voor een kindelement waar het evenement op luistert.
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
}
});
Fiddle:
Dit zal luisteren naar klikken op kinderen van het base
element en als het doel van een klik een ouder heeft die overeenkomt met de selector, zal de klasse gebeurtenis worden afgehandeld. Je kunt elementen toevoegen en verwijderen als je wilt zonder dat je meer klik luisteraars aan de individuele elementen hoeft toe te voegen. Dit zal ze allemaal opvangen, zelfs voor elementen die zijn toegevoegd nadat deze listener is toegevoegd, net als de jQuery functionaliteit (waarvan ik me kan voorstellen dat het enigszins vergelijkbaar is onder de motorkap).
Dit hangt af van de gebeurtenissen die zich voortplanten, dus als je stopPropagation
op de gebeurtenis ergens anders, kan het zijn dat dit niet werkt. Ook heeft de closest
functie wat compatibiliteitsproblemen met IE blijkbaar (wat niet?).
Hier zou een functie van gemaakt kunnen worden als je dit soort acties herhaaldelijk moet luisteren, zoals
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: Dit bericht gebruikte oorspronkelijk de matches
functie voor DOM elementen op het event doel, maar dit beperkte de doelen van events tot alleen de directe klasse. Het is bijgewerkt om in plaats daarvan de closest
functie te gebruiken, waardoor gebeurtenissen op kinderen van de gewenste klasse ook de gebeurtenissen kunnen triggeren. De originele matches
code kan gevonden worden in de originele fiddle:
https://jsfiddle.net/u6oje7af/23/
U kunt de onderstaande code gebruiken:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);