Dogodek je pomemben del .Spletna stran se odzove glede na dogodek, ki se je zgodil. Nekatere dogodke ustvarijo uporabniki, nekatere pa API. V tem članku bomo videli, kako se dogajajo dogodki in kako se metoda addEventListener v JavaScript uporablja v naslednjem zaporedju:
- Kaj je poslušalec dogodkov?
- AddEventListener () v JavaScript
- Vrednosti parametrov
- AddEventListener v JavaScript: Primer
Kaj je poslušalec dogodkov?
Poslušalec dogodkov je postopek v JavaScript, ki čaka na dogodek. Preprost primer dogodek je uporabnik, ki klikne miško ali pritisne tipko na tipkovnici.
The addEventListener () je vgrajen Funkcija JavaScript ki dogodek posluša in drugi argument, ki ga je treba poklicati vsakič, ko se opisani dogodek sproži. Vsakemu elementu je mogoče dodati poljubno število obdelovalcev dogodkov, ne da bi prepisali obstoječe obdelovalce dogodkov.
addEventListener () v JavaScript
Nekateri od Lastnosti metode poslušalca dogodkov vključujejo:
- The addEventListener () metoda pripne vodnik dogodkov na navedeni element.
- Ta metoda pritrdi obdelovalec dogodkov na element brez prepisovanje obstoječi upravljavci dogodkov.
- Lahko dodate veliko vodnikov dogodkov enemu elementu.
- Dodate lahko veliko obdelovalcev dogodkov isti tip enemu element , to je dva dogodka »klik«.
- Poslušalce dogodkov je mogoče dodati poljubnim OBSODBA predmet ne samo elementov HTML. tj. okenski predmet.
- Metoda addEventListener () to naredi lažje za nadzor nad tem, kako dogodek reagira do brbotanja.
Pri uporabi metode addEventListener () je JavaScript ločen od marku, za boljšo berljivost in omogoča dodajanje poslušalcev dogodkov, tudi če oznake HTML ne nadzorujete.
Prav tako lahko poslušalca dogodkov enostavno odstranite s pomočjo metoda removeEventListener () .
Sintaksa:
target.addEventListener (vrsta, poslušalec [, možnosti]) target.addEventListener (vrsta, poslušalec [, useCapture]) target.addEventListener (vrsta, poslušalec [, useCapture, želiUntrusted])
Vrednosti parametrov
| Parameter | Opis |
dogodek | Obvezno. Niz, ki določa ime dogodka. Opomba: Ne uporabljajte predpone “on”. Na primer, uporabite 'klik' namesto 'onclick'. kaj je serializirano v javi Za seznam vseh dogodkov HTML DOM si oglejte našo celotno referenco predmeta dogodka HTML DOM. |
funkcijo | Obvezno. Določa funkcijo, ki se zažene ob dogodku. Ko se dogodek zgodi, se objekt dogodka preda funkciji kot prvi parameter. Vrsta dogodka predmet odvisno od določenega dogodka. Dogodek »klik« na primer pripada predmetu MouseEvent. |
useCapture | Neobvezno. Logična vrednost, ki določa, ali naj se dogodek izvede v fazi zajemanja ali v fazi mehurčkov. Možne vrednosti: true - Obdelovalec dogodkov se izvede v fazi zajemanjafalse- Privzeto. Vodnik dogodkov se izvede v fazi mehurčkov |
Zdaj, ko veste, kako deluje poslušalec dogodkov, si oglejmo primer addEventListener () v JavaScript.
addEventListener () v JavaScript: Primer
& lt! DOCTYPE html & gt & lttml & gt & ltbody & gt & ltp & gt Ta primer uporablja metodo addEventListener () za izvajanje funkcije, ko uporabnik klikne gumb. & lt / p & gt & ltbutton id = 'myBtn' & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt ('myBtn'). addEventListener ('click', myFunction) funkcija myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
S tem smo prišli do konca tega addEventListenerja v JavaScript. Upam, da ste razumeli, kako poslušalec dogodka metoda deluje v JavaScript.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnih projektov. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje bloga “addEventListener v JavaScript” in mi se bomo oglasili.