Metoda addEventListener () – Cod exemplu de ascultător de evenimente JavaScript

Metoda JavaScript addEventListener () vă permite să configurați funcții care să fie apelate atunci când se întâmplă un eveniment specificat, cum ar fi atunci când un utilizator face clic pe un buton. Acest tutorial vă arată cum puteți implementa addEventListener () în codul dvs.

Înțelegerea evenimentelor și a gestionarilor de evenimente

Evenimente sunt acțiuni care se întâmplă atunci când utilizatorul sau browserul manipulează o pagină. Acestea joacă un rol important, deoarece pot determina modificarea dinamică a elementelor unei pagini web.

De exemplu, când browserul termină de încărcat un document, atunci un load evenimentul a avut loc. Dacă un utilizator face clic pe un buton pe o pagină, atunci un click eveniment s-a întâmplat.

Multe evenimente se pot întâmpla o dată, de mai multe ori sau niciodată. De asemenea, este posibil să nu știți când se va întâmpla un eveniment, mai ales dacă este generat de utilizator.

În aceste scenarii, aveți nevoie de un organizatorul evenimentului pentru a detecta când se întâmplă un eveniment. În acest fel, puteți configura codul pentru a reacționa la evenimente pe măsură ce se întâmplă din mers.

JavaScript oferă un gestionar de evenimente sub forma fișierului addEventListener() metodă. Acest handler poate fi atașat la un anumit element HTML pentru care doriți să monitorizați evenimentele, iar elementul poate avea atașat mai multe handler.

addEventListener () Sintaxă

Iată sintaxa:

target.addEventListener(event, function, useCapture)

• ţintă: elementul HTML la care doriți să adăugați gestionarul de evenimente. Acest element există ca parte a Modelului de obiect document (DOM) și poate doriți să aflați cum să selectați un element DOM.
• eveniment: un șir care specifică numele evenimentului. Am menționat deja load și click evenimente. Pentru curioși, iată o listă completă de Evenimente HTML DOM.
• funcţie: specifică funcția de rulat atunci când este detectat evenimentul. Aceasta este magia care poate permite paginilor dvs. web să se schimbe dinamic.
• useCapture: o valoare booleană opțională (adevărată sau falsă) care specifică dacă evenimentul trebuie executat în faza de captare sau clocotire. În cazul elementelor HTML imbricate (cum ar fi un img intr-un div) cu handlerele de evenimente atașate, această valoare determină care eveniment se execută mai întâi. În mod implicit, este setat la false, ceea ce înseamnă că cel mai interior handler de evenimente HTML este executat mai întâi (faza de barbotare).

addEventListener () Exemplu de cod

Acesta este un exemplu simplu pe care l-am făcut, care vă arată addEventListener() în acțiune.

Când un utilizator face clic pe buton, se afișează un mesaj. Un alt clic pe buton ascunde mesajul. Iată codul JavaScript relevant:

let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', ()=>{
  msg.classList.toggle('reveal');
})

Mergând după sintaxa afișată anterior pentru addEventListener():

• ţintă: Element HTML cu id='button'
• funcţie: funcție anonimă (săgeată) care setează codul necesar pentru a dezvălui / ascunde mesajul
• useCapture: lăsat la valoarea implicită a false

Funcția mea este capabilă să dezvăluie / ascundă mesajul prin adăugarea / eliminarea unei clase CSS numită „revelare” care schimbă vizibilitatea elementului mesajului.

Desigur, în codul dvs., nu ezitați să personalizați această funcție. De asemenea, puteți înlocui funcția anonimă cu o funcție proprie numită.

Trecerea evenimentului ca parametru

Uneori este posibil să dorim să aflăm mai multe informații despre eveniment, cum ar fi elementul pe care s-a făcut clic. În această situație, trebuie să trecem într-un parametru de eveniment funcției noastre.

Acest exemplu arată cum puteți obține id-ul elementului:

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

Aici parametrul evenimentului este o variabilă numită e dar poate fi numit cu ușurință orice altceva, cum ar fi „eveniment”. Acest parametru este un obiect care conține diverse informații despre eveniment, cum ar fi ID-ul țintă.

Nu trebuie să faceți nimic special și JavaScript știe automat ce să faceți atunci când treceți un parametru în acest fel la funcția dvs.

Eliminarea gestionarilor de evenimente

Dacă dintr-un anumit motiv nu mai doriți să se activeze un gestionar de evenimente, iată cum să îl eliminați:

target.removeEventListener(event, function, useCapture);

Parametrii sunt aceiași cu addEventListener().

Practica face perfect

Cel mai bun mod de a vă îmbunătăți cu gestionarii de evenimente este să practicați cu propriul cod.

Iată un exemplu de proiect Am făcut în care am folosit gestionare de evenimente pentru a schimba culoarea, dimensiunea și viteza bulelor care curg pe fundalul unei pagini web (va trebui să faceți clic pe panoul central pentru a dezvălui comenzile).

Distrează-te și du-te să faci ceva minunat!

Pentru mai multe cunoștințe de dezvoltare web prietenoase cu începătorii, vizitați blogul meu la 1000 Mile World și urmează-mă Stare de nervozitate.