Metoden addEventListener () - Eksempelkode for JavaScript-hendelseslytter

JavaScript addEventListener () -metoden lar deg sette opp funksjoner som skal kalles når en spesifisert hendelse skjer, for eksempel når en bruker klikker på en knapp. Denne veiledningen viser deg hvordan du kan implementere addEventListener () i koden din.

Forstå hendelser og hendelsesbehandlere

Hendelser er handlinger som skjer når brukeren eller nettleseren manipulerer en side. De spiller en viktig rolle da de kan føre til at elementer på en webside endres dynamisk.

For eksempel når nettleseren er ferdig med å laste inn et dokument, loadskjedde en hendelse. Hvis en bruker klikker på en knapp på en side, har en clickhendelse skjedd.

Mange hendelser kan skje en gang, flere ganger eller aldri. Du vet kanskje ikke når en hendelse vil skje, spesielt hvis den er brukergenerert.

I disse scenariene trenger du en hendelsesbehandler for å oppdage når en hendelse skjer. På denne måten kan du sette opp kode for å reagere på hendelser når de skjer på farten.

JavaScript gir en hendelsesbehandler i form av addEventListener()metoden. Denne behandleren kan knyttes til et bestemt HTML-element du ønsker å overvåke hendelser for, og elementet kan ha mer enn en behandler tilknyttet.

addEventListener () Syntaks

Her er syntaksen:

target.addEventListener(event, function, useCapture) 
  • mål : HTML-elementet du vil legge til hendelsesbehandleren din til. Dette elementet eksisterer som en del av Document Object Model (DOM), og det kan være lurt å lære om hvordan du velger et DOM-element.
  • hendelse : en streng som spesifiserer navnet på hendelsen. Vi har allerede nevnt loadog clickhendelser. For nysgjerrige, her er en full liste over HTML DOM-hendelser.
  • funksjon : spesifiserer funksjonen som skal kjøres når hendelsen oppdages. Dette er magien som kan gjøre at websidene dine endres dynamisk.
  • useCapture : en valgfri boolsk verdi (sann eller usann) som spesifiserer om hendelsen skal utføres i fangst- eller boblende fase. I tilfelle nestede HTML-elementer (for eksempel imginnen a div) med tilknyttede hendelsesbehandlere, bestemmer denne verdien hvilken hendelse som først blir utført. Som standard er den satt til false, noe som betyr at den innerste HTML-hendelsesbehandleren blir utført først (boblende fase).

addEventListener () Kodeeksempel

Dette er et enkelt eksempel jeg laget som viser deg addEventListener()i aksjon.

Når en bruker klikker på knappen, vises en melding. Et annet knappeklikk skjuler meldingen. Her er relevant JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Går etter syntaksen vist tidligere for addEventListener():

  • mål : HTML-element medid='button'
  • funksjon : anonym (pil) funksjon som setter opp koden som er nødvendig for å avsløre / skjule meldingen
  • useCapture : venstre til standardverdien påfalse

Min funksjon er i stand til å avsløre / skjule meldingen ved å legge til / fjerne en CSS-klasse kalt "avsløre" som endrer meldingselementets synlighet.

Selvfølgelig kan du i koden din tilpasse denne funksjonen. Du kan også erstatte den anonyme funksjonen med en egen funksjon.

Passing Event som en parameter

Noen ganger kan det være lurt å vite mer informasjon om arrangementet, for eksempel hvilket element som ble klikket på. I denne situasjonen må vi overføre en hendelsesparameter til vår funksjon.

Dette eksemplet viser hvordan du kan få elementets id:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Her er hendelsesparameteren en variabel som heter, emen den kan lett kalles noe annet som "hendelse". Denne parameteren er et objekt som inneholder forskjellig informasjon om hendelsen, for eksempel mål-ID.

Du trenger ikke å gjøre noe spesielt, og JavaScript vet automatisk hva du skal gjøre når du overfører en parameter på denne måten til funksjonen din.

Fjerne hendelsesbehandlere

Hvis du av en eller annen grunn ikke lenger vil at en hendelsesbehandler skal aktiveres, kan du fjerne den slik:

target.removeEventListener(event, function, useCapture); 

Parametrene er de samme som addEventListener().

Øvelse gjør mester

Den beste måten å bli bedre med hendelsesbehandlere er å øve med din egen kode.

Her er et eksempel på et prosjekt jeg gjorde der jeg brukte hendelsesbehandlere for å endre farge, størrelse og hastighet på bobler som strømmer over bakgrunnen til en webside (du må klikke på sentralpanelet for å avsløre kontrollene).

Ha det gøy og gå å lage noe fantastisk!

For mer nybegynnervennlig kunnskap om nettutvikling, besøk bloggen min på 1000 Mile World og følg meg på Twitter.