En begivenhed er en vigtig del af .En webside svarer i henhold til en begivenhed, der opstod. Nogle begivenheder genereres af brugerne, og andre genereres af API'er. I denne artikel vil vi se, hvordan begivenheder opstår, og hvordan metoden, addEventListener i JavaScript bruges i følgende rækkefølge:
- Hvad er begivenhedslytter?
- AddEventListener () i JavaScript
- Parameterværdier
- AddEventListener i JavaScript: Eksempel
Hvad er begivenhedslytter?
En begivenhedslytter er en procedure i JavaScript, der venter på, at en begivenhed finder sted. Det enkle eksempel på en begivenhed er en bruger, der klikker på musen eller trykker på en tast på tastaturet.
Det addEventListener () er en indbygget JavaScript-funktion som tager begivenheden at lytte til, og et andet argument skal kaldes, når den beskrevne begivenhed bliver fyret. Ethvert antal begivenhedshåndterere kan føjes til et enkelt element uden at overskrive eksisterende begivenhedshåndterere.
addEventListener () i JavaScript
Nogle af funktioner af begivenhedslyttermetoden inkluderer:
- Det addEventListener () metode vedhæfter en begivenhedshåndterer til det angivne element.
- Denne metode knytter en begivenhedshåndterer til et element uden overskrivning eksisterende håndtering af begivenheder.
- Du kan tilføje mange hændelsesbehandlere til et element.
- Du kan tilføje mange begivenhedshåndterere af samme type til en element , dvs. to 'klik' -begivenheder.
- Eventlyttere kan føjes til enhver DOM objekt ikke kun HTML-elementer. dvs. vinduesgenstanden.
- Metoden addEventListener () gør det lettere for at kontrollere, hvordan begivenheden reagerer til boblende.
Når du bruger metoden addEventListener (), adskilles JavaScript fra markup, for bedre læsbarhed og giver dig mulighed for at tilføje begivenhedslyttere, selv når du ikke kontrollerer HTML-markeringen.
Du kan også nemt fjerne en begivenhedslytter ved hjælp af removeEventListener () metode .
Syntaks:
target.addEventListener (type, lytter [, optioner]) target.addEventListener (type, lytter [, useCapture]) target.addEventListener (type, lytter [, useCapture, ønskerUtrusted])
Parameterværdier
| Parameter | Beskrivelse |
begivenhed | Påkrævet. En streng, der specificerer navnet på begivenheden. Bemærk: Brug ikke 'til' -præfikset. Brug f.eks. 'Klik' i stedet for 'onclick'. For en liste over alle HTML DOM-begivenheder, se vores komplette HTML DOM Event Reference. |
fungere | Påkrævet. Angiver den funktion, der skal køre, når begivenheden finder sted. Når begivenheden opstår, sendes et begivenhedsobjekt til funktionen som den første parameter. Typen af begivenhed objekt afhænger af den specificerede begivenhed. For eksempel hører 'klik' -hændelsen til MouseEvent-objektet. |
useCapture | Valgfri. En boolsk værdi, der specificerer, om begivenheden skal udføres i optagelses- eller boblende fase. Mulige værdier: sand - Begivenhedshåndteringen udføres i den optagende fasefals- Standard. Begivenhedshåndtereren udføres i den boblende fase |
Nu hvor du ved, hvordan en begivenhedslytter fungerer, skal vi se på et eksempel på addEventListener () i JavaScript.
addEventListener () i JavaScript: Eksempel
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Dette eksempel bruger metoden addEventListener () til at udføre en funktion, når en bruger klikker på en knap. & lt / p & gt & ltbutton id = 'myBtn' & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & da ('myBtn'). addEventListener ('klik', myFunction) funktion myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Med dette kommer vi til en ende på denne addEventListener i JavaScript. Jeg håber, du forstod, hvordan begivenhedslytteren metode fungerer i JavaScript.
dyb læring vs maskinindlæring vs mønstergenkendelse
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig i færdigheder til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på “addEventListener in JavaScript” blog, så vender vi tilbage til dig.