Бандишидани таҳлилгарон ба элементҳо дар JavaScript

Биёд акнун ба элементҳои DOM-амон биёмӯзем, ки ба амалҳои корбари сомона ҷавоб диҳанд. Масалан, корбар бо мушак ба ҷое пахш кунад, ва рамзи мо дар ҷавоб бояд ин пахшро таҳлил кунад ва ба экран ягон маълумотро барорад.

Амалҳои корбар, ки мо метавонем тавассути JavaScript пайгирӣ кунем, рӯйдодҳо номида мешаванд. Рӯйдодҳо метавонанд чунинанд: клик кардан бо мушак ба элементи саҳифа, овардани мушак ба элементи саҳифа ё баръакс - рафтани курсори мушак аз элемент ва ғайра. Ғайр аз ин, рӯйдодҳое ҳастанд, ки ба амалҳои корбар вобаста нестанд, масалан, рӯйдоди бор кардани саҳифаи HTML ба браузер.

Барои мисол биёед як тугма созем, ки пахш кардан бар он ба экран ягон матн барорад. Аввал рамзи HTML-и тугмаро созем:

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

Акнун ишора ба тугмаро дар тағирёбанда гирем:

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

Акнун ба мо лозим аст, ки ба тугмаамон реаксия таъин кунем дар вақти клик кардан бар он. Барои ин дар JavaScript усули махсуси addEventListener вуҷуд дорад, ки параметри аввалаш номи рӯйдодро мегирад (клик кардан бар тугма номи 'click' дорад), ва параметри дуюмаш - функсия-коллбэк, ки дар ҳангоби рух додани ин рӯйдод иҷро мешавад.

Биёд, масалан, дар вақти клик кардан бар тугма ягон матнро барорем:

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

3 тугма дода шудаанд:

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

Чунин кунед, ки дар вақти клик кардан бар тугмаи аввал ба экран рақами 1 барорад, дар вақти клик бар тугмаи дуюм - рақами 2, ва дар вақти клик бар тугмаи сеюм - рақами 3.