Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Gebeurtenisafhandeling is een belangrijk concept in JavaScript. Gebeurtenissen zorgen ervoor dat HTML-pagina's dynamisch en interactief zijn, zodat u aantrekkelijke gebruikersinterfaces kunt maken. U kunt code schrijven om JavaScript uit te voeren wanneer er een gebeurtenis plaatsvindt op de DOM.

Een gebeurtenis kan zijn wanneer een gebruiker op een HTML-element klikt, de pagina wordt geladen of wanneer de waarde van een invoerveld verandert. U kunt code schrijven die de HTML-structuur verandert wanneer een gebeurtenis plaatsvindt. Ontdek drie verschillende manieren waarop u gebeurtenislisteners aan uw code kunt toevoegen.

1. De addEventListener-methode

De methode addEventListener is een van de meest populaire methoden voor gebeurtenislisteners. Het heeft drie parameters:

  • Een object dat de gebeurtenis vertegenwoordigt.
  • Een functie om ermee om te gaan.
    • instagram viewer
  • Een optionele booleaanse waarde, useCapture, die beschrijft hoe de gebeurtenis zich door het DOM verspreidt.

De gebeurtenis kan elke opgegeven DOM-gebeurtenis op een doelelement zijn. Een functie is ingesteld om te reageren op die gebeurtenis wanneer deze zich voordoet.

De functie kan anoniem of een benoemde functie zijn. Populaire doelen zijn onder meer een element, zijn kinderen, een document en een venster dat een gebeurtenis ondersteunt.

De addEventListener() is een aanbevolen methode om gebeurtenislisteners in JavaScript te beheren. Het werkt op elk gebeurtenisdoel, niet alleen op HTML-elementen, en ondersteunt meerdere gebeurtenishandlers.

Misschien wil je wat code uitvoeren op de DOM. U kunt tekst afdrukken, berekeningen uitvoeren of een afbeelding weergeven wanneer een gebruiker op de knop klikt.

Laten we illustreren met de volgende code:

html>
<html>
<lichaam>
<h1>De addEventListener-methode met functiesh1>
<knopID kaart="mijnBtn">Klik hierknop>
<PID kaart="demonstratie">P>
lichaam>
html>

Voeg vervolgens de gebeurtenislistener toe met behulp van de knop.

const element = document.getElementById("mijnBtn");
element.addEventListener("Klik", mijnFunctie1);
functiemijnFunctie1() {
document.getElementById("demonstratie").innerHTML += "Fuction uitgevoerd! "
}

Wanneer u op de knop klikt, wordt de tekst 'Function Executed' op het scherm afgedrukt, zoals hieronder weergegeven.

2. Gebeurtenissen delegeren omEventListener toe te voegen

Het delegeren van een gebeurtenis in JavaScript is een patroon dat wordt gebruikt om meerdere gebeurtenissen af ​​te handelen. In plaats van een gebeurtenislistener aan elk element toe te voegen, voegt u de gebeurtenislistener alleen toe aan een bovenliggend element. Je hebt toegang tot het element dat de gebeurtenis heeft geactiveerd via de .doel eigenschap van het gebeurtenisobject.

Dit zorgt ervoor dat alle elementen waarop u zich richt, gedeeld gedrag vertonen. Zonder dit zou u handmatig een gebeurtenislistener aan elke luisteraar moeten toevoegen.

Hier is een voorbeeld van gebeurtenisdelegatie:

html>
<html>
<lichaam>
<h1> Evenementdelegatie op knoppenh1>
<div>
<knop>Knop 1knop>
<knop>Knop 2knop>
<knop>Knop 3knop>
div>
lichaam>
html>

Voeg vervolgens de gebeurtenislisteners toe aan alle knoppen met slechts een paar regels code.

const div = document.querySelector('div')
div.addEventListener("Klik", (gebeurtenis) => {
als (event.target.tagName 'KNOP') {
troosten.log('Knop geklikt')
 }
});

Event-delegatie is een patroon dat is gebaseerd op Event-bubbling. Event bubbling vindt plaats wanneer een element een event ontvangt en deze verzendt naar zijn bovenliggende en voorouderlijke elementen in de DOM. Het is een voortplanting van evenementen concept dat standaard gebeurt in JavaScript.

3. Het onclick-kenmerk gebruiken

U kunt het onclick-attribuut gebruiken om JavaScript uit te voeren wanneer gebruikers op een element klikken. Net als de addEventListener-methode kunt u de onclick-methode gebruiken om tekst af te drukken, berekeningen uit te voeren en elementkenmerken op de DOM.

U kunt de onclick-gebeurtenislistener als een inline gebeurtenishandler aan het HTML-element toevoegen. De gebeurtenis vindt plaats wanneer een gebruiker op het element klikt. Wijzig de kleur van de volgende alinea dynamisch met de onclick-methode:

html>
<html>
<lichaam>
<h1> Voer onClick-gebeurtenissen uith1>
<PID kaart="demonstratie"bij klikken="mijnFunctie()">
 Klik op mij om mijn tekstkleur te wijzigen.
P>
lichaam>
html>

Voeg in het JavaScript-bestand de volgende code toe:

functiemijnFunctie() {
document.getElementById("demonstratie").stijl.kleur = "rood";
}

De uitvoer zal verschijnen zoals getoond:

Waarom leren over gebeurtenisluisteraars?

Als JavaScript-ontwikkelaar maak je vaak gebruik van gebeurtenislisteners in projecten. U kunt tal van functies creëren met gebeurtenislisteners, waaronder bubbling en het vastleggen van gebeurtenissen. Als u deze concepten begrijpt, kunt u gemakkelijker dynamische interfaces voor uw toepassingen maken.