Een evenement is een belangrijk onderdeel van Een webpagina reageert op basis van een gebeurtenis die heeft plaatsgevonden. Sommige evenementen zijn door gebruikers gegenereerd en sommige worden gegenereerd door API's. In dit artikel zullen we zien hoe gebeurtenissen plaatsvinden en hoe de methode addEventListener in JavaScript in de volgende volgorde wordt gebruikt:
- Wat is Event Listener?
- AddEventListener () in JavaScript
- Parameterwaarden
- AddEventListener in JavaScript: voorbeeld
Wat is Event Listener?
Een gebeurtenislistener is een procedure in JavaScript die wacht op een gebeurtenis. Het eenvoudige voorbeeld van een evenement is een gebruiker die met de muis klikt of op een toets op het toetsenbord drukt.
De addEventListener () is een ingebouwde JavaScript-functie die de gebeurtenis nodig heeft om naar te luisteren, en een tweede argument dat moet worden aangeroepen wanneer de beschreven gebeurtenis wordt geactiveerd. Een willekeurig aantal gebeurtenishandlers kan aan een enkel element worden toegevoegd zonder bestaande gebeurtenishandlers te overschrijven.
addEventListener () in JavaScript
Sommige van de Kenmerken van de event listener-methode zijn:
- De addEventListener () methode voegt een gebeurtenis handler naar het opgegeven element.
- Deze methode koppelt een gebeurtenishandler aan een element zonder overschrijven bestaande event handlers.
- Je kan toevoegen veel event handlers naar één element.
- U kunt veel event-handlers van de zelfde type tot een element , d.w.z. twee 'klik' -gebeurtenissen.
- Event listeners kunnen aan elk ARREST object niet alleen HTML-elementen. d.w.z. het raamobject.
- De addEventListener () - methode maakt het gemakkelijker om te bepalen hoe de gebeurtenis reageert te borrelen.
Bij gebruik van de addEventListener () - methode, wordt JavaScript gescheiden van de markup, voor een betere leesbaarheid en stelt u in staat om event listeners toe te voegen, zelfs als u geen controle heeft over de HTML-markup.
U kunt ook eenvoudig een gebeurtenislistener verwijderen door de removeEventListener () - methode .
Syntaxis:
target.addEventListener (type, listener [, opties]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantUntrusted])
Parameterwaarden
| Parameter | Omschrijving |
evenement | Verplicht. Een tekenreeks die de naam van de gebeurtenis specificeert. Opmerking: gebruik niet het voorvoegsel 'aan'. Gebruik bijvoorbeeld 'klik' in plaats van 'onclick'. Voor een lijst van alle HTML DOM-evenementen, bekijk onze complete HTML DOM Event Object Reference. hoe je visuele studio leert |
functie | Verplicht. Specificeert de functie die moet worden uitgevoerd wanneer de gebeurtenis plaatsvindt. Wanneer de gebeurtenis optreedt, wordt een gebeurtenisobject als eerste parameter aan de functie doorgegeven. Het type evenement voorwerp hangt af van de gespecificeerde gebeurtenis. De gebeurtenis 'click' behoort bijvoorbeeld tot het MouseEvent-object. |
useCapture | Optioneel. Een Booleaanse waarde die specificeert of de gebeurtenis moet worden uitgevoerd in de vastleggende of in de bubblingfase. Mogelijke waarden: true - De gebeurtenishandler wordt uitgevoerd in de vastlegfase false- Default. De gebeurtenishandler wordt uitgevoerd in de bubbling-fase |
Nu u weet hoe een gebeurtenislistener werkt, gaan we eens kijken naar een voorbeeld van de addEventListener () in JavaScript.
addEventListener () in JavaScript: voorbeeld
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt In dit voorbeeld wordt de methode addEventListener () gebruikt om een functie uit te voeren wanneer een gebruiker op een knop klikt. & lt / p & gt & ltbutton id = 'myBtn' demo & gtget & gtbutton id = 'myBtn' demo & gtget & gtBty ' ('myBtn'). addEventListener ('klik', myFunction) functie myFunction () {document.getElementById ('demo'). innerHTML = 'Hallo wereld'} & lt / script & gt & lt / body & gt & lt / html & gt 
Hiermee komen we een einde aan deze addEventListener in JavaScript. Ik hoop dat je hebt begrepen hoe de luisteraar van het evenement methode werkt in JavaScript.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de blog 'addEventListener in JavaScript' en we nemen contact met u op.