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, loadtoimus sündmus. Kui kasutaja klõpsab lehel nuppu, on clicksü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 loadja clicksü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 imga sees olevate div) 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 koosid='button'
  • funktsioon : anonüümne (nool) funktsioon, mis seadistab kirja kuvamiseks / peitmiseks vajaliku koodi
  • UseCapture : vasakule vaikeväärtuselefalse

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, ekuid 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.