Metoda addEventListener () - Primer kode poslušalca dogodkov JavaScript

Metoda JavaScript addEventListener () vam omogoča, da nastavite funkcije, ki bodo poklicane, ko se zgodi določen dogodek, na primer, ko uporabnik klikne gumb. Ta vadnica vam prikazuje, kako lahko v kodo implementirate addEventListener ().

Razumevanje dogodkov in upravljavcev dogodkov

Dogodki so dejanja, ki se zgodijo, ko uporabnik ali brskalnik manipulira s stranjo. Imajo pomembno vlogo, saj lahko povzročijo, da se elementi spletne strani dinamično spreminjajo.

Ko na primer brskalnik konča nalaganje dokumenta, se je loadzgodil dogodek. Če uporabnik klikne gumb na strani, se clickje zgodil dogodek.

Veliko dogodkov se lahko zgodi enkrat, večkrat ali nikoli. Morda tudi ne veste, kdaj se bo dogodek zgodil, še posebej, če ga ustvari uporabnik.

V teh scenarijih potrebujete upravljalnik dogodkov, da zazna, kdaj se dogodek zgodi. Na ta način lahko nastavite kodo, ki se odziva na dogodke, ko se zgodijo sproti.

JavaScript ponuja obdelavo dogodkov v obliki addEventListener()metode. Ta obdelovalec je mogoče pritrditi na določen element HTML, za katerega želite spremljati dogodke, in lahko ima element pritrjen več kot en obdelovalec.

sintaksa addEventListener ()

Tu je sintaksa:

target.addEventListener(event, function, useCapture) 
  • target : element HTML, ki mu želite dodati obdelovalec dogodkov. Ta element obstaja kot del objektnega modela dokumenta (DOM) in morda boste želeli izvedeti več o izbiri elementa DOM.
  • dogodek : niz, ki določa ime dogodka. Omenili smo že loadin clickdogodke. Za radovedneže je tukaj celoten seznam dogodkov HTML DOM.
  • funkcija : določa funkcijo, ki naj se zažene, ko je dogodek zaznan. To je čarobnost, ki lahko vašim spletnim stranem omogoča dinamično spreminjanje.
  • useCapture : neobvezna logična vrednost (true ali false), ki določa, ali naj se dogodek izvede v fazi zajema ali mehurčka. V primeru ugnezdenih elementov HTML (na primer imgznotraj a div) s priloženimi obdelovalci dogodkov ta vrednost določa, kateri dogodek se izvede najprej. Privzeto je nastavljeno na false, kar pomeni, da se najprej izvrši notranji obdelovalec dogodkov HTML (faza mehurčkov).

Primer kode addEventListener ()

To je preprost primer, ki sem ga prikazal in vam pokaže addEventListener()v akciji.

Ko uporabnik klikne gumb, se prikaže sporočilo. Še en klik gumba skrije sporočilo. Tukaj je ustrezen JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Upoštevajte prej prikazano sintakso za addEventListener():

  • target : element HTML zid='button'
  • funkcija : anonimna (puščica) funkcija, ki nastavi kodo, potrebno za razkritje / skrivanje sporočila
  • useCapture : levo do privzete vrednostifalse

Moja funkcija lahko razkrije / skrije sporočilo z dodajanjem / odstranjevanjem razreda CSS, imenovanega "razkrij", ki spremeni vidnost elementa sporočila.

Seveda v svoji kodi lahko to funkcijo prilagodite. Anonimno funkcijo lahko nadomestite tudi z lastno imenovano funkcijo.

Prenos dogodka kot parametra

Včasih bomo morda želeli izvedeti več informacij o dogodku, na primer, kateri element smo kliknili. V tem primeru moramo parametru dogodka predati svojo funkcijo.

Ta primer prikazuje, kako lahko dobite id elementa:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Tu je parameter dogodka spremenljivka z imenom, evendar jo je mogoče enostavno imenovati karkoli drugega, na primer "dogodek". Ta parameter je objekt, ki vsebuje različne informacije o dogodku, kot je ciljni id.

Ni vam treba narediti ničesar posebnega in JavaScript samodejno ve, kaj storiti, ko parameter prenesete na ta način v svojo funkcijo.

Odstranjevanje vodnikov dogodkov

Če iz nekega razloga ne želite več, da bi se aktiviral vodnik dogodkov, ga odstranite tako:

target.removeEventListener(event, function, useCapture); 

Parametri so enaki kot addEventListener().

Vaja dela mojstra

Najboljši način za izboljšanje z vodji dogodkov je vadba z lastno kodo.

Tu je primer projekta, ki sem ga opravil, pri katerem sem z upravljavci dogodkov spreminjal barvo, velikost in hitrost mehurčkov, ki tečejo v ozadju spletne strani (za prikaz kontrolnikov boste morali klikniti na osrednjo ploščo).

Zabavajte se in pojdite narediti nekaj super!

Za začetnike bolj prijazno znanje o spletnem razvoju obiščite moj spletni dnevnik 1000 Mile World in me spremljajte na Twitterju.