En händelse är en viktig del av .En webbsida svarar enligt en händelse som inträffat. Vissa händelser genereras av användare och andra genereras av API: er. I den här artikeln kommer vi att se hur händelser inträffar och hur metoden addEventListener i JavaScript används i följande sekvens:
- Vad är Event Listener?
- AddEventListener () i JavaScript
- Parametervärden
- AddEventListener i JavaScript: Exempel
Vad är Event Listener?
En eventlyssnare är ett förfarande i JavaScript som väntar på att en händelse ska inträffa. Det enkla exemplet på en händelse är en användare som klickar med musen eller trycker på en tangent på tangentbordet.
De addEventListener () är en inbyggd JavaScript-funktion som tar händelsen att lyssna på och ett andra argument som ska anropas när den beskrivna händelsen avfyras. Valfritt antal händelseshanterare kan läggas till i ett enda element utan att skriva över befintliga händelsehanterare.
addEventListener () i JavaScript
Några av funktioner av evenemangets lyssnarmetod inkluderar:
- De addEventListener () metoden fäster en händelsehanterare till det angivna elementet.
- Denna metod fäster en händelsehanterare till ett element utan överskrivning befintliga evenemangshanterare.
- Du kan lägga till många evenemangshanterare till ett element.
- Du kan lägga till många evenemangshanterare av samma typ till en element , dvs två 'klick' -händelser.
- Eventlyssnare kan läggas till valfri DOM objekt inte bara HTML-element. dvs fönsterobjektet.
- Metoden addEventListener () gör det lättare för att kontrollera hur händelsen reagerar till bubblande.
När du använder metoden addEventListener () separeras JavaScript från markup, för bättre läsbarhet och låter dig lägga till händelserlyssnare även när du inte kontrollerar HTML-markeringen.
Du kan också enkelt ta bort en eventlyssnare genom att använda removeEventListener () -metoden .
Syntax:
target.addEventListener (typ, lyssnare [, alternativ]) target.addEventListener (typ, lyssnare [, useCapture]) target.addEventListener (typ, lyssnare [, useCapture, vill inte betrodda])
Parametervärden
| Parameter | Beskrivning |
händelse | Nödvändig. En sträng som anger händelsens namn. Obs! Använd inte prefixet 'på'. Använd till exempel 'klicka' istället för 'onclick'. För en lista över alla HTML DOM-händelser, se vår fullständiga referens för HTML DOM-händelseobjekt. |
fungera | Nödvändig. Anger vilken funktion som ska köras när händelsen inträffar. När händelsen inträffar skickas ett händelseobjekt till funktionen som den första parametern. Typ av händelse objekt beror på den angivna händelsen. Till exempel tillhör 'klick' -händelsen till MouseEvent-objektet. |
useCapture | Frivillig. Ett booleskt värde som anger om händelsen ska utföras i fångst- eller bubblningsfasen. blandning av tablådata fungerar inte Möjliga värden: sant - Händelsehanteraren körs i den fångande fasfals- Standard. Händelsehanteraren körs i den bubblande fasen |
Nu när du vet hur en eventlyssnare fungerar, låt oss titta på ett exempel på addEventListener () i JavaScript.
addEventListener () i JavaScript: exempel
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Detta exempel använder metoden addEventListener () för att utföra en funktion när en användare klickar på en knapp. & lt / p & gt & ltbutton id = 'myBtn' & gt & gt & gt & gt & gt & gt & ('myBtn'). addEventListener ('click', myFunction) funktion myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Med detta kommer vi till ett slut på denna addEventListener i JavaScript. Jag hoppas att du förstod hur evenemanget lyssnaren metod fungerar i JavaScript.
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på bloggen “addEventListener in JavaScript” så återkommer vi till dig.