Обработчик события кнопки на JavaScript
На предыдущих уроках по JavaScript, мы научились получать и изменять элементы на страницах. Но зачем это нужно, если можно сразу создать страницу с необходимым HTML кодом? Так мы и делаем всегда - сначала создаем статическую страницу, только одного этого недостаточно. Дело в том, что взаимодействие с пользователем происходит при помощи событий мыши или клавиатуры и нам надо как-то реагировать на эти события.
Статичная кнопка
У меня на сайте есть кнопка, при нажатии на которую ничего не происходит. Как заставить кнопку реагировать на клик пользователя (например менять текст на ней)?
#myBtn {
background-color: #9C27B0;
color: white;
padding: 20px;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
width: 250px;
margin: 20px 200px;
}
<button id="myBtn">Кликни по мне</button>
Превращение статичной кнопки в интерактивную
Вот теперь нам пригодится навык поиска элементов на странице.
1) Шаг. Получение элемента, событие которого вы хотите обрабатывать.
Мы хотим обрабатывать событие клика на элементе с идентификатором myBtn. Поэтому объявим переменную buttonElem и при помощи метода getElementById сохраним кнопку в эту переменную.
const buttonElem = document.getElementById('myBtn');
2) Шаг. Создание функции, которая будет вызываться при возникновении события «клик».
Создадим функцию с логичным названием onButtonClick. Функция должна заменить текст на кнопке, поэтому пропишем в теле функции выражение, которое изменит содержимое тега button. Обратимся к переменной и через свойство textContent заменим надпись на кнопке. Пока на данном этапе, при нажатии на кнопку ничего не происходит. Ведь браузер еще не знает, какую функцию ему вызывать при после клика на кнопку.
let onButtonClick = function() {
buttonElem.textContent = 'Спасибо за клик'
}
3) Шаг. Связать обработчик события с событием клика и элементом.
Должен кто-то отследить событие клика по кнопке и сообщить об этом браузеру. Этот кто-то, называется обработчик событий addEventListener. Повесим на buttonElem метод addEventListener и передадим ему два аргумента: название события «Click» и название функции. Функция будет вызываться, при наступлении указанного события.
buttonElem.addEventListener('click', onButtonClick);
Ура! Наш JS код сработал, когда мы нажимаем на кнопку - меняется текст кнопки.
const buttonElem = document.getElementById('myBtn');
let onButtonClick = function() {
buttonElem.textContent = 'Спасибо за клик'
}
buttonElem.addEventListener('click', onButtonClick);
Как работают функции?
В примере используется функция обратного вызова (callback). Отличается она от обычной функции тем, что вызывается сразу после определенного события. В нашем случае, после события клика. Обычная функция выполняется сразу после загрузки страницы или через указанный интервал времени.
Если было бы нужно вызвать функцию без привязки к событиям, то мы добавили бы следующую строчку. Скобки после названия означают вызов функции без привязки к событиям и тогда текст на кнопке изменится сразу после загрузки страницы.
onButtonClick();
Если убрать скобки, тогда это будет ссылка на функцию, которую мы передаем вторым аргументом при установки слушателя событий. Мы говорим браузеру, что эту функцию нужно будет вызвать, но только после клика пользователя по кнопке. Поэтому у функции обратного вызова нельзя ставить скобки.
В качестве второго аргумента можно передавать анонимную функцию. Анонимная функция не имеет имени и вместо имени вставляется инструкция (код JavaScript), что делает эта функция.
buttonElem.addEventListener('click', function() {
buttonElem.textContent = 'Спасибо за клик'
});
Анонимная и именованная функция делают одно и тоже и оба варианта рабочие. Большинство разработчиков используют именованные функции, такой код проще читается. Создание обработчика событий не требует написания много строчек кода и вместо события click, можно привязывать другие события к совершенно разным элементам. А базовые принципы изложены в этой статье.
-
Создано 12.04.2021 10:12:41
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.