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 loadir clickį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 imgviduje div) 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 suid='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, etač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“.