Везивање руковаоца за елементе у JavaScript-у

Хајде сада да научимо наше DOM елементе да реагују на акције корисника сајта. На пример, корисник ће кликнути мишем негде, а наш код ће у одговору требати да обради то кликање и прикаже на екрану неку информацију.

Акције корисника које можемо пратити преко JavaScript-а називају се догађајима. Догађаји могу бити следећи: клик мишем на елемент странице, прелазак мишем преко елемента странице или обрнуто - удаљавање курсора миша са елемента и тако даље. Поред тога, постоје догађаји који не зависе од акција корисника, на пример, догађај при учитавању HTML странице у прегледач.

Хајде за пример да направимо дугме, при клику на које ће се на екран исписати неки текст. За почетак ћемо направити HTML код дугмета:

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

Хајде сада да добијемо референцу на дугме у променљиву:

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

Сада нам је неопходно да поставимо реакцију нашег дугмета при клику на њега. За то у JavaScript-у постоји специјална метода addEventListener, која први параметар прима назив догађаја (клик на дугме има назив 'click'), а други параметар - функцију-колбек (callback), која се извршава при настајању тог догађаја.

Хајде, на пример, при клику на дугме да испишемо неки текст:

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

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