Handlers de evenimente

Dacă în codul JavaScript apare un eveniment, acesta este gestionat de un manipulator de eveniment asociat acestuia. Să vedem cum să identificăm manipulatorii de evenimente.

Manipulatori încorporați

Cel mai simplu mod de a identifica manipulatorii de evenimente este să-i instalați în codul HTML. Aceștia sunt cunoscuți sub numele de manipulatori încorporați sau manipulatori inline și sunt definiți în codul elementului folosind atribute.

Astfel de atribute încep cu prefixul "on". De exemplu, multe elemente HTML au atributul "onclick", care definește manipulatorul pentru evenimentul de clic pe element. Să ne uităm la un exemplu cu un buton:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <button onclick="console.log('Apăsat!')">Apasă-mă</button>
</body>
</html>

Prin atributul "onclick" cu valoarea "console.log('Apăsat!')", se atașează un manipulator pentru evenimentul de clic al butonului. Acest manipulator constă într-o singură instrucțiune JavaScript - "console.log('Apăsat!')", care afișează un mesaj în consolă.

Astfel, când se apasă butonul, evenimentul de clic va fi declanșat și se va executa manipulatorul din atributul "onclick".

Se poate defini mai multe instrucțiuni într-un mod similar:

<button onclick="console.log('Salut');console.log('Apăsat!')">Apasă-mă</button>

Dar, evident, aceasta nu este cea mai comodă metodă. Însă, de asemenea, poți muta toate instrucțiunile într-o funcție JavaScript separată și să transmiți apelul acestei funcții atributului onclick:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <button onclick="btn_click()">Click Me</div>
   <script>
   let clicks = 0; // contor de apăsări
       function btn_click(){
       console.log("Clicked", ++clicks);
   }
   </script>
</body>
</html>

Acum, la apăsarea butonului, va fi apelată funcția btn_click, care este definită în codul JavaScript.

Cu toate că această abordare funcționează bine, ea are câteva dezavantaje:

Codul HTML se amestecă cu codul JavaScript, ceea ce face mai dificilă dezvoltarea, depanarea și întreținerea aplicației
Handler-ii de evenimente pot fi atribuiți doar elementelor deja create pe pagina web. Elementele create dinamic pierd capacitatea de a fi gestionate pentru evenimente
Unui element poate fi atașat doar un singur handler de eveniment
Nu se poate elimina handler-ul de eveniment fără a modifica codul

Proprietățile handler-ilor de evenimente

Problemele întâmpinate la utilizarea handler-ilor încorporați au fost concepute pentru a fi soluționate de proprietățile handler-ilor. La fel ca și pentru elementele HTML care au atribute pentru handler-i, în codul JavaScript pentru elementele DOM, putem accesa proprietățile handler-ilor, care corespund atributelor:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <button id="btn">Click Me</button>
   <script>
       let clicks = 0;     // contor de apăsări

       function btn_click() {
           console.log("Apăsat", ++clicks);
       }

       // stabilim un ascultător de evenimente pentru elementul cu id="btn"
       document.getElementById("btn").addEventListener("click", btn_click);
   </script>
</body>
</html>

În final, este suficient să luăm proprietatea onclick și să îi atribuim o funcție utilizată ca handler. Astfel, codul HTML se separă de codul JavaScript.

Ascultători de evenimente

Cu toate că proprietățile handler-ilor rezolvă unele probleme legate de utilizarea atributelor, în același timp, acesta nu este un abordaj optim. Un alt mod de a stabili handler-i de evenimente este utilizarea ascultătorilor.

Pentru a lucra cu ascultătorii de evenimente în JavaScript, există obiectul EventTarget, care definește metodele addEventListener() (pentru adăugarea unui ascultător) și removeEventListener() pentru eliminarea unui ascultător. Și deoarece elementele DOM sunt și ele obiecte EventTarget, ele au și aceste metode. Practic, ascultătorii reprezintă aceleași funcții ca și handler-ii.

Metoda addEventListener() primește doi parametri: numele evenimentului fără prefixul "on" și funcția handler-ului pentru acel eveniment. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <button id="btn">Click Me</button>
   <script>
       let clicks = 0;     // contor de apăsări

       function btn_click() {
           console.log("Apăsat", ++clicks);
       }

       const btn = document.getElementById("btn");

       // atașăm ascultătorul de eveniment "click"
       btn.addEventListener("click", btn_click);

       // eliminăm ascultătorul de eveniment "click"
       // btn.removeEventListener("click", btn_click);
   </script>
</body>
</html>

Deci, în acest caz, din nou, se tratează evenimentul "click". Eliminarea unui ascultător este similară cu adăugarea:

btn.removeEventListener("click", btn_click);

Un avantaj al utilizării ascultătorilor este că putem seta mai multe funcții pentru un singur eveniment:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <button id="btn">Click Me</button>
   <script>
       let clicks = 0;     // contor de apăsări

       function btn_click() {
           console.log("Apăsat", ++clicks);
       }

       const btn = document.getElementById("btn");

       // atașăm primul ascultător de eveniment "click" sub formă de funcție btn_click
       btn.addEventListener("click", btn_click);

       // atașăm al doilea ascultător de eveniment "click" sub formă de funcție anonimă
       btn.addEventListener("click", function(){
           console.log("Buton apăsat!");
       });

       // atașăm al treilea ascultător de eveniment "click" sub formă de funcție săgeată
       btn.addEventListener("click", ()=>console.log("Element apăsat!"));
   </script>
</body>
</html>