Событие onclick - это, пожалуй, самое популярное событие на странице, т.к. щелчки мышью мы совершаем по кнопками, по ссылкам в меню, по элементам аккордеона, которые сворачиваются и разворачиваются и т.п.
Начнем рассматривать обработку этого события с простого примера.
| 1 2 | <p onclick="alert('Вы сделали клик по абзацу.\n Хорошего вам настроения!')"> Быстрее щелкайте по абзацу!</p> |
Быстрее щелкайте по абзацу!
Обычно в качестве примера для обработки события onclick используют кнопку. Мы не будем отходить от традиции и напишем простой скрипт, который будет отображать скрытый текст в абзаце, идущем в разметке сразу за кнопкой.
| 1 2 3 4 5 6 7 | <button onclick="text.style.display='block'">Показать текст</button> <p id="text" style="display: none"> Пантелею-программисту<br> Нравится печатать быстро.<br> Целый день сидит-молчит<br> И по кнопочкам стучит. </p> |
Тестируем пример ...
... и понимаем, что нам не хватает теперь обратного действия - чтобы при повторном клике по кнопке текст сворачивался. Сделаем этот вариант, но уже с использованием классов. В коде, размещенном ниже, у нас есть 2 элемента - кнопка с id="btn" и абзац id="pText", к которым мы обращаемся в функции-обработчике события onclick. Строка pText.classList.toggle('hideText') позволяет убирать класс hideText, если он присутствует как атрибут в элементе pText, или добавлять, если класса нет. Тернарный оператор в последней строке функции позволяет менять текст кнопки в зависимости от того, который написан в данный момент.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style> .hideText {display: none; } </style> <div class="test"> <button id="btn">Показать текст</button> <p id="pText" class="hideText">Пантелею-программисту<br> печатать быстро.<br> Целый день сидит-молчит<br> И по кнопочкам стучит.</p> </div> <script> btn.onclick = function(){ pText.classList.toggle('hideText'); this.innerHTML.indexOf('Показать ') >-1 ? this.innerHTML = "Спрятать текст" : this.innerHTML ="Показать текст"; } </script> |
Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.
Обработка события onclick для меню
В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка. Мы используем css-свойство animation, чтобы меню появлялось из прозрачного состояния (за это отвечает свойство opacity). Обратите внимание, что теги <script> расположены после тегов с разметкой html-элементов, иначе скрипт будет вызывать ошибку.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> @keyframes fadeInMenu { from {opacity: 0} to {opacity: 1} } </style> <a href="#" id="toggleMenu">Menu</a> <ul id="mymenu" class="hideText"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> </ul> <script> toggleMenu.addEventListener('click', showHideMenu); function showHideMenu(event){ event.preventDefault(); mymenu.classList.toggle('hideText'); mymenu.classList.contains('hideText') ? mymenu.style.animation='none' : mymenu.style.animation='fadeInMenu .8s'; } </script> |
В функцию showHideMenu(event) передается параметр event, который мы вроде бы нигде не записывали. Этот параметр - ссылка на событие со всеми его свойствами и методами. Нужен параметр event для того, чтобы при клике на ссылке страница не "прыгала" вверх, т.к. именно к этому приводит такая запись атрибута href="#". Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода event.preventDefault().
Вы можете проверить действие метода event.preventDefault(), кликнув на ссылке с текстом "Menu" и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.
Обработка события onclick для элементов форм
В формах чаще всего клики мышью обрабатываются для кнопок, флажков и радио-кнопок (переключателей). Мы рассмотрим вариант скрипта, который меняет изображение при клике на одной из радио-кнопок. Для этого создадим html-разметку, в которой будет форма с именем imageControl и 4 переключателя. В переключателях важным атрибутом для нас будет value, в котором указан путь к изображениям, которые затем мы будем подставлять в качестве атрибута src для изображения:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <fieldset> <legend>Выберите изображение чашки</legend> <form name="imageControl"> <input type="radio" name="imgChange" id="im1" value="cups/cup1.jpg" checked> <label for="im1">Чашка 1</label> <input type="radio" name="imgChange" id="im2" value="cups/cup2.jpg"> <label for="im2">Чашка 2</label> <input type="radio" name="imgChange" id="im3" value="cups/cup3.jpg"> <label for="im3">Чашка 3</label> <input type="radio" name="imgChange" id="im4" value="cups/cup4.png"> <label for="im4">Чашка 4</label> </form> </fieldset> <img src="cups/cup1.jpg" alt="Cup with cat" id="cupHolder"> |
В скрипте мы создадим переменную cupHolder для обращения к изображению и radioLen, которая будет определять количество наших радио-кнопок. Затем в цикле переберем все радио-кнопки и зададим им обработчик события click с помощью метода addEventListener.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script> var cupHolder = document.getElementById("cupHolder"), radioLen = document.imageControl.imgChange.length; for (var i = 0; i < radioLen; i++) { document.imageControl.imgChange[i].addEventListener('click', function() { cupHolder.src = this.value; } ); } </script> |
Результат наших действий можно посмотреть на примере:
Еще один пример связан с кликом на флажке (checkbox). В данном случае у нас есть список фамилий, который содержит элементы типа <input type="checkbox">. Самый первый элемент с id="all" предназначен для того, чтобы при клике на нем выделить все остальные флажки или снять с них выделение.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <fieldset> <legend>Выделение списком</legend> <form name="fio" id="fio"> <p><input type="checkbox" name='all' id="all"> <label for="all" id="chooseAll">Выделить всех</label></p> <hr> <p><input type="checkbox" name='f1'> Арзамасова </p> <p><input type="checkbox" name='f2'> Буканов </p> <p><input type="checkbox" name='f3'> Иванов </p> <p><input type="checkbox" name='f4'> Остроухова </p> <p><input type="checkbox" name='f5'> Петров </p> <p><input type="checkbox" name='f6'> Сидоров </p> <p><input type="checkbox" name='f7'> Угрюмов </p> </form> </fieldset> |
В скрипте мы будем обращаться в цикле ко всем флажкам, поэтому выделим для этого отдельную функцию. Для того чтобы мы могли использовать один и тот же флажок для выделения всех остальных и сброса этого выделения, объявим логическую переменную flag, которую потом будем проверять.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> var flag=false; document.fio.all.onclick = function(){ if(!flag){ chooseAll.innerHTML = "Снять выделение"; flag=true; checkElements(true); } else { chooseAll.innerHTML = "Выделить всех"; flag=false; checkElements(false); } } function checkElements(variant){ for(var i=1; i<document.fio.length; i++){ document.fio.elements[i].checked = variant; } } </script> |
Пример в действии:
Еще один простой вариант использования события клика вместе с переключением класса, имеющего свойство transition, представлен ниже. В коде использован метод toggle свойства classList, который работает, как переключатель классов.
See the Pen Simple Transition Click Animation by Elen (@ambassador) on CodePen.
Чтобы свободнее ориентироваться в вариантах назначения событий, вы можете почитать статью "Обработка событий в JavaScript".
Обработка onclick в jQuery
Давайте также посмотрим, как назначается обработчик события клика в jQuery. Для этого в этой библиотеке есть возможность записать $('селектор').on('click', function(){ ... }) или использовать упрощенный вариант $('селектор').click( function(){ ... } ). Напомню, что перед тем, как добавлять код jQuery, вам нужно подключить ее в свой html-документ.
В примере ниже обработчик события клика приводит к смене GIF-изображений в картине, зеркале или окне посреди фона. Пути к изображениям собраны в массив.
Код примера можно посмотреть на вкладке JS.
See the Pen ｒｅｆｌｅｃｔｉｏｎｓ by Jackie Zen (@jackiezen) on CodePen.
