Metode addEventListener () - JavaScript notikumu uztvērēja koda paraugs

Metode JavaScript addEventListener () ļauj iestatīt funkcijas, kuras izsaukt, kad notiek noteikts notikums, piemēram, kad lietotājs noklikšķina uz pogas. Šī apmācība parāda, kā kodā varat ieviest addEventListener ().

Izpratne par notikumiem un notikumu apstrādātājiem

Notikumi ir darbības, kas notiek, kad lietotājs vai pārlūks manipulē ar lapu. Viņiem ir svarīga loma, jo tie var izraisīt tīmekļa lapas elementu dinamisku maiņu.

Piemēram, kad pārlūks pabeidz dokumenta ielādi, loadnotika notikums. Ja lietotājs noklikšķina uz pogas lapā, clickir noticis notikums.

Daudzi notikumi var notikt vienreiz, vairākas reizes vai nekad. Jūs arī nevarat zināt, kad notikums notiks, it īpaši, ja tas ir lietotāju ģenerēts.

Šādos gadījumos jums ir nepieciešams notikumu apstrādātājs, lai noteiktu, kad notikums notiek. Tādā veidā jūs varat iestatīt kodu, lai reaģētu uz notikumiem, kad tie notiek lidojot.

JavaScript nodrošina notikumu apstrādātāju addEventListener()metodes veidā. Šo apdarinātāju var pievienot konkrētam HTML elementam, kuram vēlaties pārraudzīt notikumus, un elementam var būt pievienoti vairāki apstrādātāji.

addEventListener () sintakse

Šeit ir sintakse:

target.addEventListener(event, function, useCapture) 
  • mērķis : HTML elements, kuram vēlaties pievienot savu notikumu apstrādātāju. Šis elements pastāv kā daļa no dokumenta objekta modeļa (DOM), un jūs varētu vēlēties uzzināt, kā izvēlēties DOM elementu.
  • notikums : virkne, kas norāda notikuma nosaukumu. Mēs jau minējām loadun clicknotikumus. Interesantiem šeit ir pieejams pilns HTML DOM notikumu saraksts.
  • function : norāda funkciju, kas jāpalaiž, kad tiek konstatēts notikums. Šī ir burvība, kas var ļaut jūsu tīmekļa lapām dinamiski mainīties.
  • useCapture : izvēles Būla vērtība (patiesa vai nepatiesa), kas norāda, vai notikums jāizpilda tveršanas vai burbuļošanas fāzē. Ja ir ligzdoti HTML elementi (piemēram, a imgiekšienē div) ar pievienotiem notikumu apstrādātājiem, šī vērtība nosaka, kurš notikums tiks izpildīts pirmais. Pēc noklusējuma tā ir iestatīta uz false, kas nozīmē, ka vispirms tiek izpildīts iekšējais HTML notikumu apstrādātājs (burbuļošanas fāze).

addEventListener () koda piemērs

Šis ir vienkāršs manis sniegtais piemērs, kas parāda jūs addEventListener()darbībā.

Kad lietotājs noklikšķina uz pogas, tiek parādīts ziņojums. Vēl viens pogas klikšķis slēpj ziņojumu. Šeit ir attiecīgais JavaScript:

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

Pārejot pēc sintakses, kas iepriekš parādīta addEventListener():

  • mērķis : HTML elements arid='button'
  • funkcija : anonīma (bultiņa) funkcija, kas nosaka kodu, kas nepieciešams, lai atklātu / paslēptu ziņojumu
  • useCapture : pa kreisi uz noklusējuma vērtībufalse

Mana funkcija spēj atklāt / paslēpt ziņojumu, pievienojot / noņemot CSS klasi ar nosaukumu "atklāt", kas maina ziņojuma elementa redzamību.

Protams, savā kodā droši pielāgojiet šo funkciju. Varat arī aizstāt anonīmo funkciju ar savu nosaukumu.

Notikuma norise kā parametrs

Dažreiz mēs varētu vēlēties uzzināt vairāk informācijas par notikumu, piemēram, uz kura elementa tika noklikšķināts. Šajā situācijā mums ir jānodod notikuma parametrs mūsu funkcijai.

Šis piemērs parāda, kā jūs varat iegūt elementa ID:

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

Šeit notikuma parametrs ir mainīgais ar nosaukumu, ebet to var viegli saukt par jebko citu, piemēram, "notikums". Šis parametrs ir objekts, kas satur dažādu informāciju par notikumu, piemēram, mērķa ID.

Jums nav jādara nekas īpašs, un JavaScript automātiski zina, kā rīkoties, ja šādi nododat parametru savai funkcijai.

Notikumu apstrādātāju noņemšana

Ja kādu iemeslu dēļ vairs nevēlaties, lai notikumu apstrādātājs tiktu aktivizēts, veiciet tālāk norādītās darbības.

target.removeEventListener(event, function, useCapture); 

Parametri ir tādi paši kā addEventListener().

Prakse padara perfektu

Labākais veids, kā kļūt labākam ar pasākumu apstrādātājiem, ir trenēties ar savu kodu.

Šeit ir manis veikts projekta piemērs, kurā es izmantoju notikumu apstrādātājus, lai mainītu to burbuļu krāsu, izmēru un ātrumu, kas plūst pāri tīmekļa lapas fonam (jums būs jānoklikšķina uz centrālā paneļa, lai atklātu vadīklas).

Izklaidējieties un dodieties uztaisīt kaut ko lielisku!

Lai iegūtu vairāk iesācējiem draudzīgu tīmekļa izstrādes zināšanu, apmeklējiet manu emuāru vietnē 1000 Mile World un sekojiet man Twitter.