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, loadopstod der en begivenhed. Hvis en bruger klikker på en knap på en side, clicker 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 loadog clickbegivenheder. 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 imginden for a div) 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 medid='button'
  • funktion : anonym (pil) funktion, der indstiller den kode, der er nødvendig for at afsløre / skjule meddelelsen
  • useCapture : venstre til standardværdien affalse

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, emen 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.