Metoden addEventListener () - Eksempelkode for JavaScript-begivenhedslytter
JavaScript addEventListener () -metoden giver dig mulighed for at indstille funktioner, der skal kaldes, når en bestemt begivenhed sker, f.eks. Når en bruger klikker på en knap. Denne vejledning viser dig, hvordan du kan implementere addEventListener () i din kode.
Forståelse af begivenheder og begivenhedshandlere
Begivenheder er handlinger, der sker, når brugeren eller browseren manipulerer en side. De spiller en vigtig rolle, da de kan få elementer på en webside til at ændre sig dynamisk.
For eksempel, når browseren er færdig med at indlæse et dokument, load
opstod der en begivenhed. Hvis en bruger klikker på en knap på en side, click
er der sket en begivenhed.
Mange begivenheder kan ske en gang, flere gange eller aldrig. Du ved muligvis heller ikke, hvornår en begivenhed vil ske, især hvis den er brugergenereret.
I disse scenarier har du brug for en begivenhedshåndterer for at opdage, hvornår en begivenhed sker. På denne måde kan du indstille kode til at reagere på begivenheder, når de sker i farten.
JavaScript giver en begivenhedshåndterer i form af addEventListener()
metoden. Denne handler kan knyttes til et specifikt HTML-element, som du ønsker at overvåge begivenheder for, og elementet kan have mere end en handler tilknyttet.
addEventListener () Syntaks
Her er syntaksen:
target.addEventListener(event, function, useCapture)
- target : det HTML-element, du vil føje din begivenhedshåndterer til. Dette element findes som en del af Document Object Model (DOM), og du vil muligvis lære mere om, hvordan du vælger et DOM-element.
- event : en streng, der specificerer navnet på begivenheden. Vi har allerede nævnt
load
ogclick
begivenheder. For de nysgerrige er her en komplet liste over HTML DOM-begivenheder. - funktion : specificerer den funktion, der skal køres, når begivenheden registreres. Dette er den magi, der kan gøre det muligt for dine websider at ændre sig dynamisk.
- useCapture : en valgfri boolsk værdi (sand eller falsk), der specificerer, om begivenheden skal udføres i optagelses- eller boblende fase. I tilfælde af indlejrede HTML-elementer (såsom en
img
inden for adiv
) med tilknyttede begivenhedshåndterere, bestemmer denne værdi, hvilken begivenhed der først udføres. Som standard er det indstillet til falsk, hvilket betyder, at den inderste HTML-begivenhedshåndterer udføres først (boblende fase).
addEventListener () Kodeeksempel
Dette er et simpelt eksempel, jeg lavede, og som viser dig addEventListener()
i aktion.
Når en bruger klikker på knappen, vises en meddelelse. Et andet klik på en knap skjuler beskeden. Her er den relevante JavaScript:
let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); })
Går efter den tidligere viste syntaks for addEventListener()
:
- mål : HTML-element med
id='button'
- funktion : anonym (pil) funktion, der indstiller den kode, der er nødvendig for at afsløre / skjule meddelelsen
- useCapture : venstre til standardværdien af
false
Min funktion er i stand til at afsløre / skjule beskeden ved at tilføje / fjerne en CSS-klasse kaldet "afsløre", som ændrer beskedelementets synlighed.
Selvfølgelig i din kode, er du velkommen til at tilpasse denne funktion. Du kan også erstatte den anonyme funktion med en egen navngivet funktion.
Aflevering af begivenhed som parameter
Nogle gange vil vi måske vide mere information om begivenheden, f.eks. Hvilket element der blev klikket på. I denne situation skal vi overføre en hændelsesparameter til vores funktion.
Dette eksempel viser, hvordan du kan få elementets id:
button.addEventListener('click', (e)=>{ console.log(e.target.id) })
Her er begivenhedsparameteren en variabel med navnet, e
men det kan let kaldes alt andet som f.eks. Denne parameter er et objekt, der indeholder forskellige oplysninger om begivenheden, såsom mål-id.
Du behøver ikke gøre noget særligt, og JavaScript ved automatisk, hvad de skal gøre, når du sender en parameter på denne måde til din funktion.
Fjernelse af begivenhedshåndterere
Hvis du af en eller anden grund ikke længere vil have, at en begivenhedshåndterer skal aktiveres, skal du fjerne den her:
target.removeEventListener(event, function, useCapture);
Parametrene er de samme som addEventListener()
.
Øvelse gør mester
Den bedste måde at blive bedre på med begivenhedshåndterere er at øve med din egen kode.
Her er et eksempel på et projekt, jeg lavede, hvor jeg brugte begivenhedshåndterere til at ændre farve, størrelse og hastighed på bobler, der flyder over baggrunden af en webside (du bliver nødt til at klikke på det centrale panel for at afsløre kontrollerne).
Hav det sjovt og gå og lav noget fantastisk!
For mere nybegyndervenlig viden om webudvikling, besøg min blog på 1000 Mile World og følg mig på Twitter.