Meetod addEventListener () - JavaScripti sündmuste kuulaja näidiskood
Meetod JavaScripti addEventListener () võimaldab teil seadistada funktsioone, mida kutsutakse määratud sündmuse korral, näiteks kui kasutaja klõpsab nuppu. See õpetus näitab teile, kuidas saate oma koodis addEventListener () rakendada.
Sündmuste ja ürituste käitlejate mõistmine
Sündmused on toimingud, mis toimuvad siis, kui kasutaja või brauser lehega manipuleerib. Neil on oluline roll, kuna need võivad põhjustada veebisaidi elementide dünaamilise muutumise.
Näiteks kui brauser on dokumendi laadimise lõpetanud, load
toimus sündmus. Kui kasutaja klõpsab lehel nuppu, on click
sündmus juhtunud.
Paljud sündmused võivad juhtuda üks kord, mitu korda või mitte kunagi. Samuti ei pruugi te teada, millal sündmus juhtub, eriti kui see on kasutaja loodud.
Nendes stsenaariumides vajate sündmuste käitlejat, et tuvastada sündmuse sündmus. Nii saate seadistada koodi, et reageerida sündmustele, kui need juhtuvad lennult.
JavaScript pakub addEventListener()
meetodi vormis sündmuste käitlejat . Selle käitleja saab manustada konkreetse HTML-elemendi juurde, mille sündmusi soovite jälgida, ja elemendil võib olla rohkem kui üks käitleja.
süntaks addEventListener ()
Siin on süntaks:
target.addEventListener(event, function, useCapture)
- sihtmärk : HTML-element, kuhu soovite oma sündmuste käitleja lisada. See element eksisteerib dokumendi objektimudeli (DOM) osana ja võiksite õppida DOM-elemendi valimise kohta.
- sündmus : string, mis määrab sündmuse nime. Me juba mainisime
load
jaclick
sündmused. Uudishimulike jaoks on siin täielik HTML DOM-i sündmuste loend. - function : määrab funktsiooni, mida käivitada sündmuse tuvastamisel. See on võlu, mis võimaldab teie veebilehtedel dünaamiliselt muutuda.
- useCapture : valikuline tõeväärtus (true või false), mis määrab, kas sündmus tuleks käivitada jäädvustamise või mullitamise etapis. Pesastatud HTML-elementide (näiteks
img
a sees olevatediv
) ja lisatud sündmuste käitlejate puhul määrab see väärtus, milline sündmus käivitatakse esimesena. Vaikimisi on see seatud väärtusele false, mis tähendab, et kõigepealt käivitatakse sisimised HTML-i sündmuste käitlejad (mullitamise faas).
addEventListener () koodi näide
See on minu tehtud lihtne näide, mis näitab teid addEventListener()
tegutsemises.
Kui kasutaja klõpsab nuppu, kuvatakse teade. Teine nupuvajutus peidab sõnumi. Siin on asjakohane JavaScript:
let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); })
Varem näidatud süntaksist addEventListener()
:
- target : HTML-element koos
id='button'
- funktsioon : anonüümne (nool) funktsioon, mis seadistab kirja kuvamiseks / peitmiseks vajaliku koodi
- UseCapture : vasakule vaikeväärtusele
false
Minu funktsioon on võimeline sõnumit paljastama / peitma, lisades / eemaldades CSS-klassi nimega "avale", mis muudab sõnumi elemendi nähtavust.
Muidugi oma koodis saate seda funktsiooni vabalt kohandada. Samuti võite asendada anonüümse funktsiooni omaenda nimelise funktsiooniga.
Möödunud sündmus parameetrina
Mõnikord võime soovida teada saada rohkem teavet sündmuse kohta, näiteks seda, millisel elemendil klõpsati. Selles olukorras peame oma funktsioonile edastama sündmuse parameetri.
See näide näitab, kuidas saate saada elemendi ID:
button.addEventListener('click', (e)=>{ console.log(e.target.id) })
Siin on sündmuse parameeter muutuja nimega, e
kuid seda saab hõlpsasti nimetada muuks, näiteks "sündmus". See parameeter on objekt, mis sisaldab sündmuse kohta mitmesugust teavet, näiteks siht-ID.
Te ei pea midagi erilist tegema ja JavaScript teab automaatselt, mida teha, kui edastate parameetri sel viisil oma funktsioonile.
Sündmuste käitlejate eemaldamine
Kui te mingil põhjusel ei soovi enam sündmuste käitlejat aktiveerida, saate selle eemaldada järgmiselt.
target.removeEventListener(event, function, useCapture);
Parameetrid on samad mis addEventListener()
.
Harjutamine teeb meistriks
Parim viis ürituste läbiviijatega paremaks saada on harjutada oma koodiga.
Siin on näide projektist, mille tegin ja mille käigus muutsin sündmuste käitlejate abil veebilehe taustal voolavate mullide värvi, suurust ja kiirust (juhtnuppude paljastamiseks peate klõpsama keskpaneelil).
Lõbutsege ja minge tehke midagi vinget!
Algajale sõbralike veebiarendusalaste teadmiste saamiseks külastage oma ajaveebi aadressil 1000 Mile World ja jälgige mind Twitteris.