Давайте теперь научим наши DOM элементы реагировать на действия пользователя сайта. Например, пользователь нажмет куда-либо мышкой, а наш код в ответ должен будет обработать это нажатие и вывести на экран какую-либо информацию.
Действия пользователя, которые мы можем отследить через JavaScript, называются событиями. События могут быть следующими: клик мышкой на элемент страницы, наведение мышкой на элемент страницы или наоборот - уход курсора мыши с элемента и так далее. Кроме того, есть события, не зависящие от действий пользователя, например, событие по загрузке HTML страницы в браузер.
Давайте для примера сделаем кнопку, по нажатию на которую на экран алертом выведется какой-то текст. Для начала сделаем HTML код кнопки:
<input id="button" type="submit">
Получим теперь ссылку на кнопку в переменную:
let button = document.querySelector('#button');
Теперь нам необходимо задать реакцию нашей
кнопки при клике по ней. Для этого в JavaScript
существует специальный метод addEventListener,
первым параметром принимающий название события
(клик на кнопку имеет название 'click'),
а вторым параметром - функцию-коллбэк,
выполняющуюся при возникновении этого события.
Давайте, например, по клику на кнопку выведем какой-нибудь текст:
button.addEventListener('click', function() {
alert('!!!');
});
Даны 3 кнопки:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
Сделайте так, чтобы по клику на первую кнопку
на экран выводилось число 1, по клику
на вторую - число 2, а по клику на
третью - число 3.