JavaScript-də elementlərə hadise emalçılarını əlavə etmək

Gəlin indi DOM elementlərimizə istifadəçinin hərəkətlərinə cavab verməyi öyrədək. Məsələn, istifadəçi siçanla hər hansı bir yerə klikləyəcək, bizim kodumuz isə bu klikə cavab olaraq onu emal edib ekrana hər hansı bir məlumat çıxarmalıdır.

JavaScript vasitəsilə izləyə biləcəyimiz istifadəçi hərəkətləri hadisələr adlanır. Hadisələr aşağıdakılar ola bilər: səhifə elementinə siçan ilə klikləmək, sıçanın kursoru elementin üzərinə gətirilməsi və ya əksinə - siçanın kursorunun elementdən çıxması və s. Bundan əlavə, istifadəçinin hərəkətlərindən asılı olmayan hadisələr də var, məsələn, HTML səhifəsinin brauzerə yüklənməsi hadisəsi.

Nümunə üçün gəlin, kliklədikdə ekrana hansısa mətn çıxaran bir düymə edək. Əvvəlcə düymənin HTML kodunu hazırlayaq:

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

İndi düyməyə istinadı dəyişənə əldə edək:

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

İndi bizim düyməmizin ona kliklədikdə reaksiyasını təyin etməliyik. Bunun üçün JavaScript-də xüsusi bir üsul var: addEventListener, ilk parametri hadisənin adını (düyməyə klik adı 'click'), ikinci parametri isə - bu hadisə baş verəndə icra olunan funksiya-kollebek qəbul edir.

Gəlin, məsələn, düyməyə kliklədikdə hansısa mətn çıxaraq:

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

3 düymə verilib:

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

Elə edin ki, birinci düyməyə kliklədikdə ekrana 1 rəqəmi çıxsın, ikinciyə kliklədikdə - 2 rəqəmi, üçüncüyə kliklədikdə isə - 3 rəqəmi çıxsın.