Событие onclick в JS

99% интерактивности веб-страниц держится на событийной модели: это когда страница терпеливо ждет определенных действий пользователя, и как только действие наступит – страница запускает привязанный к этому действию скрипт. Поскольку клики – основное действие, доступное пользователю, события onClick используются крайне часто. Ниже – о том, как они работают, какие варианты использования onClick у вас есть и где onClick чаще всего встречается.

Как работает событийная модель

Страница состоит из элементов – это могут быть блоки текста, изображения, ссылки, «пустые» блоки div и все другие элементы, которые вам предоставляет HTML. Эти элементы представлены как непосредственно тэгами в коде страницы, так и DOM-объектами. У этих элементов есть ряд событий, которые могут с элементами происходить: элемент получил фокус, на него нажали, на него навели мышью и так далее. Кроме того, события могут быть привязаны не к элементу, а ко всей странице в целом: она загрузилась, браузер получил доступ к сети и другие. Полный список событий вы можете получить здесь, нас же интересует сам факт их наличия.

Для любого события средствами JS можно назначить обработчик – callback-функцию, которая запустится, когда наступит событие. Например: при наступлении события «Страница загрузилась» срабатывает скрипт, открывающий новое окно с текстом: «Для того, чтобы избавиться от всплывающих окон, нужно всего лишь использовать старый советский…». Собственно, все: событийная модель означает, что при наступлении события вызывается его обработчик. Единственная интересная деталь – когда событие наступает, браузер автоматически формирует и посылает в скрипт объект «event», в котором прописаны детали события: когда оно произошло, по каким координатам, с каким элементом и так далее. На самом деле Event – это интерфейс, который имеет множество реализаций, в контексте onClick нас интересует реализация MouseEvent – все поля и методы объекта можно посмотреть в документации.

Где и как реализовать onClick

Есть 2 способа реализации onClick: через свойство DOM-объекта и через EventListener; первый способ – устаревший, второй – предпочтительный. Обработка события через свойство объекта выглядит так:

<input id="myButton" type="button" value="Нажми меня!">
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Спасибо!');
};
</script>

Мы взяли DOM-элемент по id и присвоили его свойству onclick анонимную функцию, которая и будет обрабатывать событие клика. Можно использовать именованную функцию, можно использовать стрелочную, можно прописать скрипт onclick прямо в HTML-тэге, можно вынести скрипты в отдельный файл и подключить их к странице (если речь идет про именованные функции) – разницы не будет, мы получаем доступ к обработчику событий через свойство элемента.

Такой подход использовался раньше, и разработчикам приходилось обходить существенную проблему: назначение обработчика события через свойство DOM-элемента не позволяет повесить несколько обработчиков на один элемент. Если вы укажете новый обработчик, старый автоматически «затрется». Проблема решилась, когда появился EventListener – специальный метод, который позволяет обрабатывать события сразу несколькими обработчиками. На самом деле, метода – 2: addEventListener() и removeEventListener. Добавление обработчика выглядит так:

<input id="myButton" type="button" value="Нажми меня!">
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Спасибо!');
});
</script>

Вместо того, чтобы работать с конкретным событием (onClick), мы теперь передаем событие в качестве аргумента – «click», подобным образом можно передать и любое другое событие. Вторым аргументом передается функция, которая сработает при наступлении события – как и в прошлом случае, это может быть именованная/анонимная/стрелочная функция.

AddEventListener позволяет добавить любое количество обработчиков на событие. RemoveEventListener позволяет удалить обработчик, метод принимает событие и функцию, которую нужно удалить. Но есть нюанс – если мы после кода выше напишем:

button.removeEventListener('click', function() {
alert('Спасибо!');
});

, то ничего не произойдет, обработчик останется на месте. Дело в том, что методу removeEventListener нужно передать именно ту функцию, которую получил addEventListener. Если мы вынесем функцию куда-нибудь, дадим ей имя и передадим в оба метода – она удалится. Если мы в addEventListener передает анонимную функцию – она останется там навечно, потому что у нас нет способов передать ее в remove. Учитывайте это, когда назначаете анонимные функции.

Где используется onClick

Обработка клика часто используется для:

• Непосредственного действия. На кнопке написано «Отправить данные», пользователь жмет на кнопку – данные отправляются.
• Изменения стиля. Пользователь жмет на элемент – и последний меняет цвет.
• Раскрытия/сворачивания элемента. Вам не обязательно назначать в качестве обработчика события скрипт, который будет что-то делать именно с элементом, на который нажал пользователь: при нажатии на один блок div может появляться или исчезать другой блок div (стилей это тоже касается).

Вывод

Тезисно:

• JS и браузеры предоставляют событийную модель поведения – это когда на странице что-то происходит в ответ на действие пользователя.
• Основной «поставщик» интерактивности – событие клика мышью, onClick.
• Назначить обработчик события для клика можно как через атрибут DOM, так и через addEventListener, и последний вариант – более предпочтительный, потому что позволяет повесить несколько обработчиков на одно событие.