Veel webapplicaties zijn afhankelijk van een of andere vorm van gebeurtenis om hun functies uit te voeren. Op een gegeven moment interageert een mens met hun interface, wat een gebeurtenis genereert. Deze door mensen aangestuurde gebeurtenissen zijn meestal afhankelijk van een randapparaat, zoals een muis of toetsenbord.

Wanneer een apparaat een gebeurtenis creëert, kan het programma ernaar luisteren om te weten wanneer specifiek gedrag moet worden uitgevoerd. In deze zelfstudie leert u hoe u met JavaScript naar gebeurtenissen kunt luisteren.

Wat is gebeurtenisgestuurd programmeren?

Gebeurtenisgestuurd programmeren is de naam van een paradigma dat afhankelijk is van de uitvoering van een gebeurtenis om zijn functies uit te voeren. Het is mogelijk om een ​​evenementgestuurd programma te maken in elke programmeertaal op hoog niveau. Maar gebeurtenisgestuurd programmeren komt het meest voor in talen zoals JavaScript die integreren met een gebruikersinterface.

Wat is een gebeurtenisluisteraar?

Een gebeurtenislistener is een functie die een vooraf gedefinieerd proces initieert als zich een specifieke gebeurtenis voordoet. Dus een gebeurtenislistener "luistert" naar een actie en roept vervolgens een functie aan die een gerelateerde taak uitvoert. Dit evenement kan een van de vele vormen aannemen. Veelvoorkomende voorbeelden zijn muisgebeurtenissen, toetsenbordgebeurtenissen en venstergebeurtenissen.

Een gebeurtenislistener maken met JavaScript

U kunt naar gebeurtenissen luisteren op elke element in de DOM. JavaScript heeft een addEventListener() functie die u op elk element op een webpagina kunt aanroepen. De addEventListener() functie is een methode van de Evenementdoel koppel. Alle objecten die gebeurtenissen ondersteunen, implementeren deze interface. Dit omvat het venster, het document en afzonderlijke elementen op de pagina.

De functie addEventListener() heeft de volgende basisstructuur:

element.addEventListener("event", functionToExecute);

Waar:

• de element kan elke HTML-tag vertegenwoordigen (van een knop tot een alinea)
• de "evenement" is een tekenreeks die een specifieke, erkende actie noemt
• de functieToExecute is een verwijzing naar een bestaande functie

Laten we de volgende webpagina maken met een paar HTML-elementen:

Welkom


 Hallo, welkom op mijn website.


Leer meer





gebruikers informatie

Gebruikersnaam: 

Indienen

De bovenstaande HTML-code creëert een eenvoudige pagina die linkt naar een JavaScript-bestand met de naam app.js. De app.js bestand bevat de code om de gebeurtenislisteners in te stellen. Dus als u een specifiek proces wilt starten wanneer een gebruiker op de eerste knop op de webpagina klikt, is dit het bestand om het in te maken.

Het app.js-bestand

document.querySelector('.btn').addEventListener("klik", klikDemo)
functie klikDemo(){
 console.log("Hallo daar")
}

De bovenstaande JavaScript-code geeft toegang tot de eerste knop op de pagina met behulp van de querySelector() functie. Het voegt vervolgens een gebeurtenislistener toe aan dit element met behulp van de addEventListener() methode. De specifieke gebeurtenis waarnaar wordt geluisterd, heeft de naam "klik". Wanneer de knop die gebeurtenis activeert, roept de luisteraar de klikDemo() functie.

Verwant: Leer hoe u DOM-kiezers gebruikt

De klikDemo() functie drukt "Hi there" af naar de browserconsole. Elke keer dat u op de knop klikt, zou u deze uitvoer in uw console moeten zien.

De "klik" gebeurtenisuitvoer

Wat zijn muisgebeurtenissen?

JavaScript heeft een MuisEvent interface die gebeurtenissen weergeeft die optreden als gevolg van de interactie van een gebruiker met zijn muis. Verschillende evenementen gebruiken de MuisEvent koppel. Deze evenementen omvatten het volgende:

• Klik
• dblclick
• muisbeweging
• mouseover
• muis uit
• muis omhoog
• mousedown

De Klik gebeurtenis vindt plaats wanneer een gebruiker een muisknop indrukt en weer loslaat terwijl de aanwijzer zich boven een element bevindt. Dit is precies wat er gebeurde in het vorige voorbeeld. Zoals u in de bovenstaande lijst kunt zien, kunnen muisgebeurtenissen vele vormen aannemen.

Een andere veelvoorkomende muisgebeurtenis is: dblclick, wat staat voor dubbelklikken. Deze wordt geactiveerd wanneer een gebruiker twee keer snel achter elkaar op een muisknop klikt. Een opmerkelijk ding over de addEventListener() functie is dat je het kunt gebruiken om meerdere gebeurtenislisteners aan een enkel element toe te wijzen.

Een dblclick-gebeurtenis toevoegen aan de eerste knop

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
functie dblclickDemo(){
 alert("Dit is een demonstratie van het aanmaken van een dubbelklikgebeurtenis")
}

Door de bovenstaande code aan het app.js-bestand toe te voegen, wordt in feite een tweede gebeurtenislistener voor de eerste knop op de webpagina gemaakt. Als u dus twee keer op de eerste knop klikt, wordt de volgende waarschuwing in de browser gemaakt:

In de bovenstaande afbeelding ziet u de gegenereerde waarschuwing en ziet u ook dat er nog twee "Hallo daar" -uitgangen in de console zijn. Dit komt omdat een dubbelklikgebeurtenis een combinatie is van twee klikgebeurtenissen en er zijn gebeurtenislisteners voor zowel de Klik en de dblclick evenementen.

De namen van de andere muisgebeurtenissen in de lijst beschrijven hun gedrag. De muisbeweging gebeurtenis vindt plaats telkens wanneer een gebruiker zijn muis beweegt wanneer de cursor zich boven een element bevindt. De muis omhoog gebeurtenis vindt plaats wanneer een gebruiker een knop boven een element ingedrukt houdt en deze vervolgens loslaat.

Wat zijn toetsenbordgebeurtenissen?

JavaScript heeft een ToetsenbordEvent koppel. Dit luistert naar interacties tussen een gebruiker en zijn toetsenbord. In het verleden, ToetsenbordEvent had drie soorten evenementen. JavaScript heeft sindsdien echter de toets indrukken evenement.

Dus de key-up en toets neer gebeurtenissen zijn de enige twee aanbevolen toetsenbordgebeurtenissen, en dat is alles wat je nodig hebt. De toets neer gebeurtenis vindt plaats wanneer een gebruiker op een toets drukt, en de key-up gebeurtenis vindt plaats wanneer een gebruiker deze vrijgeeft.

Als we het bovenstaande HTML-voorbeeld opnieuw bekijken, is de beste plaats om een ​​luisteraar voor toetsenbordgebeurtenissen toe te voegen de invoer element.

Een toetsenbordgebeurtenislistener toevoegen aan het app.js-bestand

let groeten = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
functie captureInput (e){
 groeten.innerText = (`Hallo ${e.target.valu}, welkom op mijn website.`)
}

De bovenstaande code gebruikt de querySelector() functie om toegang te krijgen tot de alinea en invoer elementen op de pagina. Het roept dan de addEventListener() methode op de invoer element, dat luistert naar de key-up evenement. wanneer een key-up gebeurtenis plaatsvindt, de captureInput() functie neemt de sleutelwaarde en voegt deze toe aan de alinea op de pagina. De e parameter vertegenwoordigt de gebeurtenis, die JavaScript automatisch toewijst. Dit gebeurtenisobject heeft een eigenschap, target, die een verwijzing is naar het element waarmee de gebruiker interactie heeft gehad.

In dit voorbeeld is het label op de invoer veld vraagt ​​om een ​​gebruikersnaam. Als u uw naam in het invoerveld typt, ziet de webpagina er ongeveer zo uit:

De alinea bevat nu de invoerwaarde die in het bovenstaande voorbeeld "Jane Doe" is.

addEventListener legt alle soorten gebruikersinteractie vast

Dit artikel heeft u kennis laten maken met de addEventListener() methode, evenals verschillende muis- en toetsenbordgebeurtenissen die u ermee kunt gebruiken. Op dit punt weet u hoe u naar een bepaalde gebeurtenis moet luisteren en hoe u een functie kunt maken die erop reageert.

De addEventListener biedt echter extra mogelijkheden via de derde parameter. U kunt het gebruiken om de voortplanting van gebeurtenissen te regelen: de volgorde waarin gebeurtenissen van elementen naar hun ouders of kinderen gaan.

Gebeurtenisvoortplanting in JavaScript begrijpen

Evenementen zijn een krachtige JavaScript-functie. Begrijpen hoe een webbrowser ze tegen elementen opwerpt, is essentieel om het gebruik ervan onder de knie te krijgen.

Lees volgende

Over de auteur