# Привязывание обработчиков к элементам в 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`.

← →
↑
en ru