Legarea handler-ilor la elemente în JavaScript

Să învățăm acum cum să facem elementele noastre DOM să reacționeze la acțiunile utilizatorului site-ului. De exemplu, utilizatorul va face click undeva cu mouse-ul, iar codul nostru în schimb va trebui să proceseze acest click și să afișeze pe ecran o anumită informație.

Acțiunile utilizatorului pe care le putem urmări prin JavaScript se numesc evenimente. Evenimentele pot fi următoarele: click cu mouse-ul pe un element al paginii, plasarea mouse-ului peste un element al paginii sau dimpotrivă - părăsirea cursorului mouse-ului de pe element și așa mai departe. În plus, există evenimente care nu depind de acțiunile utilizatorului, de exemplu, evenimentul de încărcare a paginii HTML în browser.

Să facem de exemplu un buton, la click-ul pe care să se afișeze pe ecran un text. Pentru început să facem codul HTML al butonului:

<input id="button" type="submit">

Să obținem acum o referință la buton într-o variabilă:

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

Acum este necesar să setăm reacția butonului nostru la click-ul pe el. Pentru aceasta în JavaScript există o metodă specială addEventListener, care primește ca prim parametru numele evenimentului (click-ul pe buton are numele 'click'), iar ca al doilea parametru - o funcție-callback, care se execută la apariția acestui eveniment.

Să afișăm, de exemplu, la click-ul pe buton un text:

button.addEventListener('click', function() {
	console.log('!!!');
});

Sunt date 3 butoane:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Faceți astfel încât la click-ul pe primul buton să se afișeze pe ecran numărul 1, la click-ul pe al doilea - numărul 2, iar la click-ul pe al treilea - numărul 3.