Приветствую вас, начинающие веб-разработчики и не только!
Рассмотрим атрибут HTML onclick и его особенности.
Навигация по статье:
onclick— представляет собой атрибут событий, при помощи которого можно задать скрипт срабатывающий при клике на элементе.
Событие onclick является базовым в HTML так как на нем завязано практически всё взаимодействие посетителя с сайтом. Поэтому оно активно применяется в скриптах для реализации определённых задач.
Для каких элементов можно использовать атрибут onclick в HTML?
Синтаксис написание этого атрибута выглядит так:
|
1 |
<input type="button" onclick="alert('Привет! Вот так работает этот скрипт')" value="Нажми на меня!"/> |
Давайте разберём что же означает набор этих странных символов.
В данном примере мы задаём атрибут onclick для кнопки button. Чтобы браузер понял что нам нужна именно кнопка мы указываем тип type="button". Далее в этом атрибуте мы пишем javascript код.
В данном случае мы вызываем модальное окно и выводим в нём текст при помощи метода alert():
|
1 |
onclick="alert('Привет! Вот так работает этот скрипт')" |
В скобках в кавычках указываем текст, который нужно вывести.
И последнее задаём текст, который будет написан на кнопке при помощи value="Нажми на меня!"
А вот так будет выглядеть это чудо в действии:
Кроме кнопок атрибут onclick можно применять к ссылкам и к любым другим тегам HTML, НО там есть свои особенности, о которых поговорим ниже.
Особенности применения onclick для ссылки HTML
HTML код написания этого атрибута в теге ссылки выглядит так:
|
1 |
<a title="Ссылка" href="#" onclick=" alert('Ку-ку!')"">Нажми на меня!</a> |
Как видите код немного отличается. Дело в том, что по правилам HTML для ссылок нам обязательно нужно указывать атрибут href, в котором нужно указать страницу для перехода. Проблема в том, что нам ведь не нужно чтобы при клике по ссылке осуществлялся переход, нам нужно чтобы срабатывал наш скрипт. Для этого внутри атрибута onclick мы дописываем return false;
Это позволяет нам добиться того чтобы браузер проигнорировал то что написано внутри атрибута href и никуда не переходил.
Вы наверное спросите: «А зачем тогда вообще оставлять атрибут href? Удалили его и все дела!»
В принципе такой вариант тоже возможен и он будет работать, НО с точки зрения валидности HTML кода это не есть хорошо, так как этот атрибут является основным и неотъемлемым для ссылки и удаляя его вы коварно лишаете ссылку важнейшей части её «тела». Валидаторы вам этого не простят!
Внутри атрибута href можно задать следующие значения:
- оставить его пустым href=""
- поставить в нём решётку href="#"
- написать href="javascript://"
- указать реальную ссылку своего сайта href=" //impuls-web.ru/"
Мне больше нравится вариант с javascript:// и #.
Использование функций javascript в атрибуте HTML onclick
Когда к щелчку нужно привязать выполнение нескольких действий javascript лучше использовать функции, а потом вызывать их в атрибуте onclick.
Например, напишем скрипт, который позволит по щелчку на кнопку скрыть один блок и показать другой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p> <input class="button" type="button" onclick="showText()" value="Нажми на меня!"/> </p> <div class="hide-block1"> Это блок, который нужно скрыть. </div> <div class="show-block1" style=”display:none;”> Это блок, который нужно показать. </div> <script> function showText() { $(".hide-block1").fadeOut(); $(".show-block1").fadeIn(); } </script> |
Обратите внимание, что в самом атрибуте мы пишем только название функции. В данном случае showText(), а код самой функции мы пишем ниже и оборачиваем его в тег script.
Ещё один вариант написания скрипта для onclick
|
1 2 3 4 5 6 |
<input type="button" id="button" value="Нажмите на кнопку" /> <script> button.onclick = function() { alert( 'Вот так это работает!' ); }; </script> |
Заключается он в том, что мы не пишем этот атрибут для кнопки, а присваиваем ей идентификатор id="button", а потом пишем скрипт, в котором указываем что при событии onclick по кнопке с идентификатором button срабатывает вот такой код:
|
1 |
alert( 'Вот так это работает!' ); |
Вот как это выглядит в действии:
На этом у меня всё! Если вы знаете ещё какие то интересные факты и примеры применения onclick в HTML – пишите их в комментариях!
Удачи вам!
С уважением Юлия Гусарь
