Jeg prøver for øyeblikket å skrive litt JavaScript for å hente attributtet til klassen som har blitt klikket på. Jeg vet at jeg bør bruke en hendelseslytter for å gjøre dette på riktig måte. Koden min er som følger:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Jeg forventet å få en varselboks hver gang jeg klikket på en av klassene for å fortelle meg attributtet, men dessverre fungerer ikke dette. Kan noen hjelpe meg?
(Note - Jeg kan ganske enkelt gjøre dette i jQuery
, men jeg ønsker IKKE å bruke det)
Dette bør fungere. getElementsByClassName
returnerer en array Array-lignende objekt (se redigering) av elementene som samsvarer med kriteriene.
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 gjør looping-delen for deg, noe du må gjøre i vanlig JavaScript.
Hvis du har ES6-støtte, kan du erstatte den siste linjen med:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Merk: Eldre nettlesere (som IE6, IE7, IE8) støtter ikke getElementsByClassName
og returnerer derfor undefined
.
EDIT: Rettelse.
getElementsByClassName
returnerer ikke en Array, men en HTMLCollection i de fleste, eller en NodeList i noen nettlesere (Mozilla ref). Begge disse typene er Array-lignende (noe som betyr at de har en lengdeegenskap og at objektene kan nås via indeksen), men er ikke strengt tatt en Array eller arvet fra en Array. (Det betyr at andre metoder som kan utføres på en Array, ikke kan utføres på disse typene).
Takk til bruker @Nemo for å ha påpekt dette og fått meg til å grave i det for å forstå det fullt ut.
Dette ble redigert for å gjøre det mulig for barn av målklassen å utløse hendelsene. Se nederst i svaret for mer informasjon.
Et alternativt svar for å legge til en hendelseslytter i en klasse der elementer ofte legges til og fjernes. Dette er inspirert av jQuery's on
-funksjon der du kan sende inn en velger for et underordnet element som hendelsen lytter på.
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:
Dette vil lytte etter klikk på barn av base
-elementet, og hvis målet for et klikk har en forelder som samsvarer med velgeren, vil klassehendelsen bli håndtert. Du kan legge til og fjerne elementer som du vil uten å måtte legge til flere klikkelyttere til de enkelte elementene. Dette vil fange opp alle, selv for elementer som er lagt til etter at denne lytteren ble lagt til, akkurat som jQuery-funksjonaliteten (som jeg antar er noe lignende under panseret).
Dette avhenger av at hendelsene forplanter seg, så hvis du stopPropagation
på hendelsen et annet sted, er det ikke sikkert at dette fungerer. Dessuten har closest
-funksjonen tilsynelatende noen kompatibilitetsproblemer med IE (hva har ikke det?).
Dette kan gjøres om til en funksjon hvis du trenger å gjøre denne typen lytting gjentatte ganger, som for eksempel
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: Dette innlegget brukte opprinnelig funksjonen matches
for DOM-elementer på hendelsesmålet, men dette begrenset hendelsesmålene til kun den direkte klassen. Det er oppdatert til å bruke closest
-funksjonen i stedet, slik at hendelser på barn av den ønskede klassen også kan utløse hendelsene. Den opprinnelige matches
-koden finner du i den opprinnelige fomla:
https://jsfiddle.net/u6oje7af/23/
Du kan bruke koden nedenfor:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);