Поврзување на обработувачи на елементи во 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.