Вы здесь: Главная » JavaScript » Обработка события onclick

Обработка события onclick

Событие onclick - это, пожалуй, самое популярное событие на странице, т.к. щелчки мышью мы совершаем по кнопками, по ссылкам в меню, по элементам аккордеона, которые сворачиваются и разворачиваются и т.п.

Начнем рассматривать обработку этого события с простого примера.

Быстрее щелкайте по абзацу!

Обычно в качестве примера для обработки события onclick используют кнопку. Мы не будем отходить от традиции и напишем простой скрипт, который будет отображать скрытый текст в абзаце, идущем в разметке сразу за кнопкой.

Тестируем пример ...

... и понимаем, что нам не хватает теперь обратного действия - чтобы при повторном клике по кнопке текст сворачивался. Сделаем этот вариант, но уже с использованием классов. В коде, размещенном ниже, у нас есть 2 элемента - кнопка с id="btn" и абзац id="pText", к которым мы обращаемся в функции-обработчике события onclick.  Строка pText.classList.toggle('hideText') позволяет убирать класс hideText, если он присутствует как атрибут в элементе pText, или добавлять, если класса нет. Тернарный оператор в последней строке функции позволяет менять текст кнопки в зависимости от того, который написан в данный момент.

Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.

Обработка события onclick для меню

В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка. Мы используем css-свойство animation, чтобы меню появлялось из прозрачного состояния (за это отвечает свойство opacity).  Обратите внимание, что теги <script> расположены после тегов с разметкой html-элементов, иначе скрипт будет вызывать ошибку.

В функцию showHideMenu(event)  передается параметр event, который мы вроде бы нигде не записывали. Этот параметр - ссылка на событие со всеми его свойствами и методами. Нужен параметр event для того, чтобы при клике на ссылке страница не "прыгала" вверх, т.к. именно к этому приводит такая запись атрибута href="#". Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода event.preventDefault().

Вы можете проверить действие метода event.preventDefault(), кликнув на ссылке с текстом "Menu"  и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.

Обработка события onclick для элементов форм

В формах чаще всего клики мышью обрабатываются для кнопок, флажков и радио-кнопок (переключателей). Мы рассмотрим вариант скрипта, который меняет изображение при клике на одной из радио-кнопок. Для этого создадим html-разметку, в которой будет форма с именем imageControl и 4 переключателя. В переключателях важным атрибутом для нас будет value, в котором указан путь к изображениям, которые затем мы будем подставлять в качестве атрибута src для изображения:

В скрипте мы создадим переменную  cupHolder для обращения к изображению и radioLen, которая будет определять количество наших радио-кнопок. Затем в цикле переберем все радио-кнопки и зададим им обработчик события click с помощью метода  addEventListener.

Результат наших действий можно посмотреть на примере:

Еще один пример связан с кликом на флажке (checkbox). В данном случае у нас есть список фамилий, который содержит элементы типа <input type="checkbox">. Самый первый элемент с id="all" предназначен для того, чтобы при клике на нем выделить все остальные флажки или снять с них выделение.

В скрипте мы будем обращаться в цикле ко всем флажкам, поэтому выделим для этого отдельную функцию. Для того чтобы мы могли использовать один и тот же флажок для выделения всех остальных и сброса этого выделения, объявим логическую переменную flag, которую потом будем проверять.

Пример в действии:

Чтобы свободнее ориентироваться в вариантах назначения событий, вы можете почитать статью "Обработка событий в JavaScript".

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *