Eventhantering är ett viktigt begrepp i JavaScript. Händelser gör det möjligt för HTML-sidor att vara dynamiska och interaktiva, så att du kan skapa tilltalande användargränssnitt. Du kan skriva kod för att köra JavaScript när en händelse inträffar på DOM.
En händelse kan vara när en användare klickar på ett HTML-element, sidan läses in eller när ett inmatningsfälts värde ändras. Du kan skriva kod som ändrar HTML-strukturen när en händelse inträffar. Lär dig tre olika sätt att lägga till händelseavlyssnare till din kod.
1. Metoden addEventListener
AddEventListener-metoden är en av de populäraste händelseavlyssnarmetoder. Den har tre parametrar:
- Ett objekt som representerar händelsen.
- En funktion för att hantera det.
- En valfri boolean, useCapture, som beskriver hur händelsen sprider sig i hela DOM.
Händelsen kan vara vilken som helst specificerad DOM-händelse på ett målelement. En funktion är inställd för att svara på den händelsen när den inträffar.
Funktionen kan vara anonym eller en namngiven funktion. Populära mål inkluderar ett element, dess underordnade, ett dokument och ett fönster som stöder en händelse.
AddEventListener() är en rekommenderad metod för att administrera händelseavlyssnare i JavaScript. Det fungerar på alla händelsemål, inte bara HTML-element, och stöder flera händelsehanterare.
Du kanske vill köra lite kod på DOM. Du kan skriva ut text, utföra beräkningar eller visa en bild när en användare klickar på knappen.
Låt oss illustrera med följande kod:
html>
<html>
<kropp>
<h1>AddEventListener-metoden med funktionerh1>
<knappid="myBtn">Klicka härknapp>
<sidid="demo">sid>
kropp>
html>Lägg sedan till händelseavlyssnaren med knappen.
konst element = dokumentera.getElementById("myBtn");
element.addEventListener("klick", myFunction1);
fungeraminFunktion1() {
dokumentera.getElementById("demo").innerHTML += "Fuktion utförd! "
}
När du klickar på knappen skrivs texten "Funktion utförd" ut på skärmen, som visas nedan.
2. Delegera händelser till addEventListener
Att delegera en händelse i JavaScript är ett mönster som används för att hantera flera händelser. Istället för att lägga till en händelseavlyssnare till varje element lägger du bara till händelseavlyssnaren till ett förfaderelement. Du kan komma åt elementet som utlöste händelsen via .mål egenskapen för händelseobjektet.
Detta säkerställer att alla element du riktar in dig på har delat beteende. Utan det skulle du behöva lägga till en händelseavlyssnare till var och en manuellt.
Här är ett exempel på händelsedelegering:
html>
<html>
<kropp>
<h1> Event Delegation på knapparh1>
<div>
<knapp>Knapp 1knapp>
<knapp>Knapp 2knapp>
<knapp>Knapp 3knapp>
div>
kropp>
html>
Lägg sedan till händelselyssnarna till alla knappar med bara några rader kod.
konst div = dokumentera.querySelector('div')div.addEventListener("klick", (händelse) => {
om (event.target.tagName 'KNAPP') {
trösta.logga("Knappen klickade")
}
});
Event delegering är ett mönster baserat på Event bubbling. Händelsebubbling inträffar när ett element tar emot en händelse och sänder den till dess förälder- och förfaderelement i DOM. Det är en händelseutbredning koncept som sker som standard i JavaScript.
3. Använda onclick-attributet
Du kan använda onclick-attributet för att köra JavaScript när användare klickar på ett element. Precis som addEventListener-metoden kan du använda onclick-metoden för att skriva ut text, utföra beräkningar och ändra elementfunktioner på DOM.
Du kan lägga till onclick-händelseavlyssnaren som en inline-händelsehanterare till HTML-elementet. Händelsen inträffar när en användare klickar på elementet. Ändra färgen på följande stycke dynamiskt med onclick-metoden:
html>
<html>
<kropp>
<h1> Execut onClick Eventsh1>
<sidid="demo"onclick="myFunction()">
Klicka på mig för att ändra min textfärg.
sid>
kropp>
html>Lägg till följande kod i JavaScript-filen:
fungeramyFunction() {
dokumentera.getElementById("demo").style.color = "röd";
}Utgången kommer att se ut som visas:
Varför lära sig om evenemangslyssnare?
Som JavaScript-utvecklare kommer du ofta att använda händelseavlyssnare i projekt. Du kan skapa många funktioner med händelselyssnare, inklusive bubblande och fånga händelser. Genom att förstå dessa begrepp blir det lättare för dig att skapa dynamiska gränssnitt på dina applikationer.
