Hændelseshåndtering er et vigtigt begreb i JavaScript. Begivenheder gør det muligt for HTML-sider at være dynamiske og interaktive, så du kan skabe tiltalende brugergrænseflader. Du kan skrive kode til at køre JavaScript, når en hændelse opstår på DOM.
En hændelse kan være, når en bruger klikker på et HTML-element, siden indlæses, eller når et inputfelts værdi ændres. Du kan skrive kode, der ændrer HTML-strukturen, når en hændelse opstår. Lær tre forskellige måder, du kan tilføje begivenhedslyttere til din kode.
1. AddEventListener-metoden
AddEventListener-metoden er en af de populære hændelseslyttermetoder. Den har tre parametre:
- Et objekt, der repræsenterer begivenheden.
- En funktion til at håndtere det.
- En valgfri boolean, useCapture, som beskriver, hvordan hændelsen forplanter sig i hele DOM.
Hændelsen kan være en hvilken som helst specificeret DOM-hændelse på et målelement. En funktion er sat op til at reagere på den hændelse, når den opstår.
Funktionen kan være anonym eller en navngivet funktion. Populære mål inkluderer et element, dets børn, et dokument og et vindue, der understøtter en begivenhed.
addEventListener() er en anbefalet metode til at administrere hændelseslyttere i JavaScript. Det fungerer på ethvert hændelsesmål, ikke kun HTML-elementer, og understøtter flere hændelseshandlere.
Du ønsker måske at udføre noget kode på DOM. Du kan udskrive tekst, udføre beregninger eller vise et billede, når en bruger klikker på knappen.
Lad os illustrere med følgende kode:
html>
<html>
<legeme>
<h1>AddEventListener-metoden med funktionerh1>
<knapid="myBtn">Klik herknap>
<sid="demo">s>
legeme>
html>Tilføj derefter begivenhedslytteren ved hjælp af knappen.
konst element = dokument.getElementById("myBtn");
element.addEventListener("klik", minFunktion1);
fungeremin funktion 1() {
dokument.getElementById("demo").innerHTML += "Fuktion udført! "
}
Når du klikker på knappen, udskrives teksten 'Funktion udført' på skærmen, som vist nedenfor.
2. Delegering af begivenheder til addEventListener
Delegering af en begivenhed i JavaScript er et mønster, der bruges til at håndtere flere begivenheder. I stedet for at tilføje en begivenhedslytter til hvert element, tilføjer du kun begivenhedslytteren til et forfaderelement. Du kan få adgang til det element, der udløste hændelsen via .mål begivenhedsobjektets egenskab.
Dette sikrer, at alle de elementer, du målretter mod, har fælles adfærd. Uden det ville du skulle tilføje en begivenhedslytter til hver enkelt manuelt.
Her er et eksempel på begivenhedsdelegering:
html>
<html>
<legeme>
<h1> Begivenhedsdelegation på knapperh1>
<div>
<knap>Knap 1knap>
<knap>Knap 2knap>
<knap>Knap 3knap>
div>
legeme>
html>
Tilføj derefter begivenhedslytterne til alle knapperne med blot et par linjer kode.
konst div = dokument.querySelector('div')div.addEventListener("klik", (begivenhed) => {
hvis (event.target.tagName 'KNAP') {
konsol.log('Knap klikket')
}
});
Begivenhedsdelegering er et mønster baseret på hændelsesbobler. Hændelsesbobling sker, når et element modtager en hændelse og transmitterer den til dets overordnede og forfædres elementer i DOM. Det er en hændelsesudbredelse koncept, der sker som standard i JavaScript.
3. Brug af onclick-attributten
Du kan bruge onclick-attributten til at køre JavaScript, når brugere klikker på et element. Ligesom addEventListener-metoden kan du bruge onclick-metoden til at udskrive tekst, udføre beregninger og ændre elementfunktioner på DOM.
Du kan tilføje onclick-hændelseslytteren som en inline hændelseshandler til HTML-elementet. Hændelsen opstår, når en bruger klikker på elementet. Skift farven på følgende afsnit dynamisk med onclick-metoden:
html>
<html>
<legeme>
<h1> Udfør onClick Eventsh1>
<sid="demo"onclick="myFunction()">
Klik på mig for at ændre min tekstfarve.
s>
legeme>
html>Tilføj følgende kode i JavaScript-filen:
fungereminFunktion() {
dokument.getElementById("demo").style.color = "rød";
}Outputtet vises som vist:
Hvorfor lære om begivenhedslyttere?
Som JavaScript-udvikler vil du ofte bruge begivenhedslyttere i projekter. Du kan oprette adskillige funktioner med begivenhedslyttere, herunder boblende og fange begivenheder. Forståelse af disse begreber vil gøre det lettere for dig at skabe dynamiske grænseflader på dine applikationer.