Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Gestionarea evenimentelor este un concept important în JavaScript. Evenimentele permit paginilor HTML să fie dinamice și interactive, permițându-vă să creați interfețe de utilizator atrăgătoare. Puteți scrie cod pentru a rula JavaScript atunci când are loc un eveniment pe DOM.

Un eveniment poate fi atunci când un utilizator face clic pe un element HTML, pagina se încarcă sau când valoarea unui câmp de intrare se modifică. Puteți scrie cod care modifică structura HTML atunci când are loc un eveniment. Aflați trei moduri diferite în care puteți adăuga ascultători de evenimente la codul dvs.

1. Metoda addEventListener

Metoda addEventListener este una dintre cele mai populare metode de ascultare a evenimentelor. Are trei parametri:

  • Un obiect care reprezintă evenimentul.
  • O funcție care să o gestioneze.
  • Un boolean opțional, useCapture, care descrie modul în care evenimentul se propagă în DOM.
instagram viewer

Evenimentul poate fi orice eveniment DOM specificat pe un element țintă. O funcție este configurată pentru a răspunde la acel eveniment atunci când are loc.

Funcția poate fi anonimă sau o funcție numită. Țintele populare includ un element, copiii acestuia, un document și o fereastră care susține un eveniment.

addEventListener() este o metodă recomandată pentru a administra ascultătorii de evenimente în JavaScript. Funcționează pe orice țintă de eveniment, nu doar pe elemente HTML și acceptă mai mulți handlere de evenimente.

Poate doriți să executați un cod pe DOM. Puteți imprima text, puteți efectua calcule sau puteți afișa o imagine atunci când un utilizator dă clic pe buton.

Să ilustrăm cu următorul cod:

html>
<html>
<corp>
<h1>Metoda addEventListener cu funcțiih1>
<butonid="myBtn">Click aicibuton>
<pid="demo">p>
corp>
html>

Apoi, adăugați ascultătorul evenimentului folosind butonul.

const element = document.getElementById("myBtn");
element.addEventListener("clic", myFunction1);
funcţiemyFunction1() {
document.getElementById("demo").innerHTML += „Funcție executată! "
}

Când faceți clic pe butonul, textul „Funcție executată” este tipărit pe ecran, așa cum se arată mai jos.

2. Delegarea evenimentelor la addEventListener

Delegarea unui eveniment în JavaScript este un model folosit pentru a gestiona mai multe evenimente. În loc să adăugați un ascultător de evenimente la fiecare element, adăugați doar un ascultător de evenimente la un element strămoș. Puteți accesa elementul care a declanșat evenimentul prin intermediul .ţintă proprietatea obiectului eveniment.

Acest lucru vă asigură că toate elementele pe care le vizați au un comportament comun. Fără el, ar trebui să adăugați manual un ascultător de evenimente la fiecare.

Iată un exemplu de delegare a evenimentului:

html>
<html>
<corp>
<h1> Delegarea evenimentului pe butoaneh1>
<div>
<buton>Butonul 1buton>
<buton>Butonul 2buton>
<buton>Butonul 3buton>
div>
corp>
html>

Apoi, adăugați ascultătorii de evenimente la toate butoanele cu doar câteva linii de cod.

const div = document.querySelector('div')
div.addEventListener("clic", (eveniment) => {
dacă (event.target.tagName 'BUTON') {
consolă.Buturuga(„Buton apăsat”)
 }
});

Delegarea evenimentului este un model bazat pe bule de evenimente. Bulbocul de evenimente are loc atunci când un element primește un eveniment și îl transmite elementelor părinte și strămoși din DOM. Este un propagarea evenimentului concept care se întâmplă implicit în JavaScript.

3. Folosind atributul onclick

Puteți utiliza atributul onclick pentru a rula JavaScript atunci când utilizatorii dau clic pe un element. La fel ca metoda addEventListener, puteți utiliza metoda onclick pentru a imprima text, a efectua calcule și a modifica caracteristicile elementului pe DOM.

Puteți adăuga ascultătorul de evenimente onclick ca handler de evenimente inline la elementul HTML. Evenimentul are loc atunci când un utilizator face clic pe element. Schimbați culoarea următorului paragraf în mod dinamic cu metoda onclick:

html>
<html>
<corp>
<h1> Executați evenimente onClickh1>
<pid="demo"onclick="funcția mea()">
 Faceți clic pe mine pentru a schimba culoarea textului.
p>
corp>
html>

În fișierul JavaScript, adăugați următorul cod:

funcţiemyFunction() {
document.getElementById("demo").stil.culoare = "roșu";
}

Ieșirea va apărea așa cum se arată:

De ce să aflați despre ascultătorii evenimentelor?

În calitate de dezvoltator JavaScript, veți folosi adesea ascultători de evenimente în proiecte. Puteți crea numeroase funcții cu ascultătorii de evenimente, inclusiv bule și capturarea evenimentelor. Înțelegerea acestor concepte vă va face mai ușor să creați interfețe dinamice în aplicațiile dvs.