En begivenhet er en viktig del av .En webside svarer i henhold til en hendelse som har skjedd. Noen hendelser genereres av brukeren, og andre genereres av API-er. I denne artikkelen vil vi se hvordan hendelser oppstår og hvordan metoden addEventListener i JavaScript brukes i følgende sekvens:
- Hva er Event Listener?
- AddEventListener () i JavaScript
- Parameterverdier
- AddEventListener i JavaScript: Eksempel
Hva er Event Listener?
En hendelseslytter er en prosedyre i JavaScript som venter på at en hendelse skal skje. Det enkle eksemplet på en begivenhet er en bruker som klikker på musen eller trykker på en tast på tastaturet.
De addEventListener () er en innebygd JavaScript-funksjon som tar hendelsen å lytte til, og et annet argument som skal kalles når den beskrevne hendelsen blir sparket. Et hvilket som helst antall hendelsesbehandlere kan legges til et enkelt element uten å overskrive eksisterende hendelsesbehandlere.
addEventListener () i JavaScript
Noen av egenskaper av begivenhetslyttermetoden inkluderer:
- De addEventListener () metoden fester en hendelsesbehandler til det angitte elementet.
- Denne metoden knytter en hendelsesbehandler til et element uten overskriving eksisterende hendelsesbehandlere.
- Du kan legge til mange hendelsesbehandlere til ett element.
- Du kan legge til mange hendelsesbehandlere av samme type til en element , dvs. to 'klikk' -hendelser.
- Eventlyttere kan legges til alle DØMMEKRAFT objekt ikke bare HTML-elementer. dvs. vindusobjektet.
- Metoden addEventListener () gjør det lettere for å kontrollere hvordan hendelsen reagerer til boblende.
Når du bruker metoden addEventListener (), blir JavaScript skilt fra markup, for bedre lesbarhet og lar deg legge til hendelseslyttere selv når du ikke kontrollerer HTML-markeringen.
Du kan også enkelt fjerne en eventlytter ved å bruke removeEventListener () -metoden .
Syntaks:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantUntrusted])
Parameterverdier
| Parameter | Beskrivelse |
begivenhet | Påkrevd. En streng som spesifiserer navnet på hendelsen. hvordan du gjør databasetesting Merk: Ikke bruk prefikset “on”. Bruk for eksempel 'klikk' i stedet for 'onclick'. For en liste over alle HTML DOM-hendelser, se vår komplette referanse for HTML DOM-hendelsesobjekt. |
funksjon | Påkrevd. Spesifiserer funksjonen som skal kjøres når hendelsen inntreffer. Når hendelsen inntreffer, overføres et hendelsesobjekt til funksjonen som den første parameteren. Type arrangement gjenstand avhenger av den spesifiserte hendelsen. For eksempel tilhører 'klikk' -hendelsen til MouseEvent-objektet. |
useCapture | Valgfri. En boolsk verdi som spesifiserer om hendelsen skal utføres i fanger eller i boblende fase. Mulige verdier: sant - hendelsesbehandleren kjøres i fangstfasen - Standard. Hendelsesbehandleren blir utført i den boblende fasen |
Nå som du vet hvordan en eventlytter fungerer, kan vi se på et eksempel på addEventListener () i JavaScript.
addEventListener () i JavaScript: Eksempel
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Dette eksemplet bruker metoden addEventListener () for å utføre en funksjon når en bruker klikker på en knapp. & lt / p & gt & ltbutton id = 'myBtn' & gt & g & g & g & g & g & g ('myBtn'). addEventListener ('click', myFunction) funksjon myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Med dette kommer vi til en slutt på denne addEventListener i JavaScript. Jeg håper du forsto hvordan arrangementet lytter metode fungerer i JavaScript.
Sjekk ut vår som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet på 'addEventListener in JavaScript' -bloggen, så kommer vi tilbake til deg.