Metodas addEventListener () - „JavaScript“ įvykių apdorojimo priemonės pavyzdžio kodas
„JavaScript addEventListener (“) metodas leidžia nustatyti funkcijas, kurias reikia iškviesti įvykus nurodytam įvykiui, pavyzdžiui, kai vartotojas spusteli mygtuką. Ši pamoka parodo, kaip galite įdiegti addEventListener () savo kode.
Suprasti įvykius ir renginių tvarkytojus
Įvykiai yra veiksmai, kurie įvyksta, kai vartotojas ar naršyklė valdo puslapį. Jie vaidina svarbų vaidmenį, nes dėl jų gali dinamiškai pasikeisti tinklalapio elementai.
Pvz., Kai naršyklė baigia įkelti dokumentą, load
įvyko įvykis. Jei vartotojas spustelėja mygtuką puslapyje, click
įvykis įvykis.
Daugelis įvykių gali įvykti vieną kartą, kelis kartus arba niekada. Taip pat galite nežinoti, kada įvykis įvyks, ypač jei jis sukurtas vartotojo.
Šiais atvejais jums reikia įvykių tvarkytuvo, kad aptiktų įvykio įvykį. Tokiu būdu galite nustatyti kodą, kad reaguotumėte į įvykius, kai jie vyksta skriejant.
„JavaScript“ pateikia įvykių tvarkytuvę addEventListener()
metodo forma . Šis apdorojimo įrankis gali būti prijungtas prie konkretaus HTML elemento, kurio įvykius norite stebėti, ir prie elemento gali būti prijungtas daugiau nei vienas tvarkytuvas.
sintaksė „addEventListener ()“
Štai sintaksė:
target.addEventListener(event, function, useCapture)
- target : HTML elementas, prie kurio norite pridėti įvykių tvarkytuvą. Šis elementas yra dokumento objekto modelio (DOM) dalis ir galbūt norėsite sužinoti, kaip pasirinkti DOM elementą.
- įvykis : eilutė, nurodanti įvykio pavadinimą. Mes jau minėjome
load
irclick
įvykius. Smalsuoliams pateikiamas visas HTML DOM įvykių sąrašas. - function : nurodo funkciją, kurią reikia vykdyti aptikus įvykį. Tai yra magija, leidžianti dinamiškai keisti jūsų tinklalapius.
- useCapture : pasirenkama loginė reikšmė (true arba false), nurodanti, ar įvykis turėtų būti vykdomas fiksavimo ar burbuliavimo fazėje. Jei įdėti HTML elementai (pvz., A
img
vidujediv
) su pridedamais įvykių tvarkytuvais, ši vertė nustato, kuris įvykis bus vykdomas pirmiausia. Pagal numatytuosius nustatymus jis nustatytas į „false“, o tai reiškia, kad pirmiausia vykdomas vidinis HTML įvykių tvarkytuvas (burbuliavimo fazė).
addEventListener () kodo pavyzdys
Tai paprastas mano pateiktas pavyzdys, parodantis, kaip jūs addEventListener()
veikiate.
Vartotojui spustelėjus mygtuką, rodomas pranešimas. Kitas mygtuko paspaudimas paslepia pranešimą. Štai atitinkama „JavaScript“:
let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); })
Einant pagal anksčiau rodytą sintaksę addEventListener()
:
- target : HTML elementas su
id='button'
- funkcija : anoniminė (rodyklė) funkcija, nustatanti kodą, reikalingą pranešimui atskleisti / slėpti
- UseCapture : kairė į numatytąją reikšmę
false
Mano funkcija sugeba atskleisti / paslėpti pranešimą, pridedant / pašalinant CSS klasę, vadinamą „atskleisti“, kuri keičia pranešimo elemento matomumą.
Žinoma, kode nedvejodami pritaikykite šią funkciją. Taip pat galite anoniminę funkciją pakeisti savo pavadinta funkcija.
Praeinantis įvykis kaip parametras
Kartais galime norėti sužinoti daugiau informacijos apie įvykį, pavyzdžiui, kokį elementą spustelėjote. Šioje situacijoje turime perduoti įvykio parametrą savo funkcijai.
Šis pavyzdys parodo, kaip galite gauti elemento ID:
button.addEventListener('click', (e)=>{ console.log(e.target.id) })
Čia įvykio parametras yra kintamasis, pavadintas, e
tačiau jį galima lengvai vadinti bet kuo kitu, pvz., „Įvykis“. Šis parametras yra objektas, kuriame yra įvairios informacijos apie įvykį, pvz., Tikslo ID.
Jums nereikia daryti nieko ypatingo, o „JavaScript“ automatiškai žino, ką daryti, kai tokiu būdu perduodate parametrą savo funkcijai.
Įvykių tvarkytuvų pašalinimas
Jei dėl kokių nors priežasčių nebenorite, kad įvykių tvarkytuvas būtų įjungtas, atlikite toliau nurodytus veiksmus.
target.removeEventListener(event, function, useCapture);
Parametrai yra tokie patys kaip addEventListener()
.
Praktika daro tobulą
Geriausias būdas pasveikti renginių tvarkytojams yra praktika naudojant savo kodą.
Tai yra mano atlikto projekto pavyzdys, kurio metu naudodamas įvykių tvarkytuvus pakeičiau interneto puslapio fone tekančių burbuliukų spalvą, dydį ir greitį (turėsite spustelėti centrinį skydelį, kad atskleistumėte valdiklius).
Linksminkis ir eik pasigamink kažko nuostabaus!
Norėdami sužinoti daugiau pradedantiesiems tinkamų žiniatinklio kūrimo žinių, apsilankykite mano tinklaraštyje, esančiame 1000 mylių pasaulyje, ir sekite mane „Twitter“.