Несколько простых примеров onclick на языке javascript. Настраиваем свои собственные события. События и узлы DOM. Последовательность выполнения скриптов

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое.

Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.

В настоящее время нет официальных средств CSS для обработки события click . Но тем не менее, существуют способы, которые можно использовать для "обнаружения" нажатия с помощью только CSS без JavaScript.

Примечание

Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока - прикоснуться к границам возможностей CSS.

Используем чекбокс

Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

To-be-changed { color: black; } input:checked ~ .to-be-changed { color: red; }

Метод основан на использовании псевдо-класса :checked и селектора ~ . Обратите внимание, что он будет работать и с селектором + . Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом.to-be-changed будет красным”.

Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

Итак, мы прячем чекбокс и используем метку для реагирования на событие click :

Input { position: absolute; top: -9999px; left: -9999px; } label { display: block; background: #08C; padding: 5px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; color: white; font-weight: bold; } input:checked ~ .to-be-changed { color: red; }

У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный - применение display:none .)

Плюсы

• Бинарный, есть только два состояния - отмечен или не отмечен
• Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
• Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

Минусы

• Элементы должны иметь общего предка
• Требуется дополнительная разметка HTML (input, label и так далее)
• Требуется дополнительные действия для работы на мобильных браузерах

Способ с:target

Есть другой способ с использованием псевдо-класса :target . Данный псевдо-класс похож на псевдо-класс :hover тем, что соответствует только определенным условиям.

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

To-be-changed { color: black; } .to-be-changed:target { color: red; }

Плюсы

• Простой код CSS
• Отлично подходит для выделения разделов

Минусы

• Мусор в истории браузера
• Происходит прокручивание страницы
• Требуется тег ссылки или операции с URL для включения хэштега
• Можно воздействовать только на один элемент (так как ID является уникальным)
• Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с:focus

Продолжим наш обзор способом с использованием другого псевдо-класса - :focus . Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

Когда вы находитесь на странице, то с помощью клавиши табуляции можно перемещаться от одного элемента к другому. Такой метод очень удобен при работе с формами для перехода между элементами без использования мыши. Также метод применяется для навигации слабовидящими людьми по странице.

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

Span:focus ~ .to-be-changed { color: red; }

Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу:focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

Плюсы

• Очень простой код CSS и HTML
• Отличная навигация

Минусы

• Требуется либо элемент с фокусом, либо атрибут tabindex
• Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым "грязным" способом обработки события click в CSS.

Идея заключается в "хранении" стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

To-be-changed { transition: all 0s 9999999s; } span:active ~ .to-be-changed { transition: all 0s; color: red; }

Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию.

Плюсы

• Просто и изящно
• Сохраняется состояние, даже если переход не закончился

Минусы

• Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
• Работает только со значениями, которые можно использовать с переходами
• Нет способов возврата к исходному состоянию
• Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

Последние несколько лет мы наблюдаем за стремительным развитием языков разработки внешних интерфейсов, а особенно – HTML с новыми спецификациями в HTML5, а также CSS версии 3 с множеством новых свойств.

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

Многим очень не доставало возможности управлять событиями при нажатиях (Click Events) в CSS. На самом деле, многие люди думают, что эта опция нам не нужна, так как взаимодействие больше относится к функционалу javascript. В принципе, здесь все ясно, наверное не очень удобно использовать javascript для самых простых событий нажатия.

В любом случае, на сегодняшний день, CSS не предоставляет нам какие-то официальные методы управления событиями нажатий в CSS. Но существует несколько очень интересных трюков, которые мы можем использовать для «определения» нажатий (кликов) при помощи только лишь кода CSS, без использования javascript, и именно об этом мы сегодня поговорим.

Дисклеймер

Данная статья нацелена на то, чтобы рассказать вам о возможности управлять событиями кликов посредством CSS. Это не совсем подходит для применения в серьезных проектах. Пожалуйста, учтите, что вся статья представляет собой ничего больше, чем эксперимент, но никак не руководство по управлению событиями кликов в вашем веб-сайте или приложении.

К тому же, некоторые из представленных методов не особо хорошо поддерживаются в браузерах, а это тем больше значит, что в данной статье мы лишь хотим продемонстрировать то, как можно расширить рамки CSS.

Хак с чекбоксом

Замечательная вещь! Мы уверены, что все вы уже слышали о хаке с чекбоксом раньше. Это наверное самый распространенный способ управления событиями кликов в CSS. Он основан на… чекбоксе.

Преимущественная сторона чекбокса заключается в том, что он бинарный. Он либо выделен, либо нет. И нет возможности выделить что-то «наполовину» или как-то вроде этого. Именно поэтому хак с чекбоксом – это довольно надежный способ запуска событий кликов в CSS. Давайте приведем пример.

Как это работает

HTML-код

CSS-код

To-be-changed {
color: black;
}

color: red;
}
Как видно, он основан на псевдо-классе:checked и основном родственном селекторе ~. Пожалуйста учтите, что он также будет работать со смежным родственным селектором +. В целом, это происходит так: «если чекбокс выделен, то следующие элементы с классом.to-be-changed будут красными».

Итак, чекбокс на самом деле не очень привлекателен, но вы без проблем можете украсить его, скрыв сам чекбокс, и привязав к нему ярлык. Нечто вроде следующего:

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

Итак, мы скрываем чекбокс, и используем ярлык для запуска события кликов.

Input {
position: absolute;
top: -9999px;
left: -9999px;
}

label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}

input:checked ~ .to-be-changed {
color: red;
}
Таким образом, у вас должно получиться нечто вроде кнопки, которая запускает процесс изменения цвета у элемента параграфа. Не круто ли? Повторный клик по кнопке переключит цвет обратно на черный.

(учтите, что здесь есть разные возможности сокрытия чекбокса, и самый популярный из них - display:none.)

Преимущества и недостатки

Преимущества:

* Бинарный (выделен или без выделения)
* Повторный клик позволяет вам вернуть исходное положение
* Позволяет применить связку событий кликов (если первый чекбокс выделен, и второй чекбокс выделен, то можно произвести следующее).

Недостатки:

* Элементам нужно разделять один и тот же родительский элемент (родственные элементы)
* Необходим дополнительный HTML-код (элемент ввода, ярлык и так далее)
* Необходимо два дополнительных трюка, чтобы заставить метод работать на мобильных браузерах (для этого нужно будет прочесть статью далее)

Метод:target

Существует другой метод, известный как «имитация» события кликов в CSS при помощи псевдо-класса:target. Этот псевдо-класс сильно схож с:hover.

Особое событие псевдо-класса:target зависит от того, что мы называем «идентификатором фрагмента». Проще говоря, этот псевдо-класс ссылается на хэштег, который вы порой можете встречать на конце URL-адреса. Совпадение образуется тогда, когда хэштег и ID элемента одинаковы.

Как это работает

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

To-be-changed {
color: black;
}

To-be-changed:target {
color: red;
}
При нажатии по ссылке (href="#id"), URL изменяется, и вы переходите к анкору #id на странице. В этот момент, элемент, обозначенный данным id, может быть указан при помощи псевдо-класса:target.

Преимущества и недостатки

Преимущества:

* Очень простой CSS
* Отлично подходит для выделения разделов

Недостатки:

* Путаница в истории браузера
* Происходит прыжок по странице (при переключении к анкору)
* Для запуска хэштега требуется тег анкора или URL-хак
* Работает только с одним элементом (так как ID всегда уникальны)
* Нет возможности вернуться к исходному положению без использования еще одно хэштега, ссылки, либо URL-хака.

Браузерная поддержка не на высоте, но все не так плохо. Все современные браузеры поддерживают такой подход, за исключением (IE 6-8). Начиная от IE9, поддержка работает стабильно.

Метод:focus

Давайте рассмотрим еще один способ с использованием псевдо-класса, на этот раз это будет:focus. Здесь суть примерно такая же, за исключением того, что здесь не требуется изменения URL. Метод нацелен на сосредоточивание внимания пользователя на конкретном элементе.

Когда вы находитесь на веб-странице, вы можете нажимать на вкладки для того, чтобы переходить по различным элементам. Это очень удобно при заполнении форм – можно переходить с одного поля на другое без помощи мыши. Это также помогает людям с ослабленным зрением перемещаться по сайту.

Важно отметить, что фокусировать внимание можно только на некоторых элементах, включая ссылки, поля ввода, а на других нельзя (абзацы, разделения и на многих других). На самом деле, и на них можно фокусироваться, но вам нужно будет добавить атрибут tabindex с цифровым значением.

Как это работает

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

Span:focus ~ .to-be-changed {
color: red;
}
Итак, когда вы кликаете по span-элементу, либо производите переход при помощи кнопки табуляции, браузер фокусируется на элементе, который совпадает с псевдо-классом:focus. Смежный родственный селектор выполнит все остальное. Довольно просто, не правда ли? Если вам не хочется разбираться с tabindex, то вы можете просто использовать ссылку с # href. Все будет работать.

Преимущества и недостатки

Преимущества:

* Очень простой CSS и HTML-код
* Отлично подходит для навигации или нечто подобного

Недостатки:

* Необходим либо элемент, позволяющий фокусировку, либо атрибут tabindex
* Псевдо-элемент совпадает только тогда, когда на элементе произведено фокусирование (это означает, что все перепутается, если кликать куда-либо еще).

Хак с transition

Это, наверное, один из самых невероятных способов управления событиями кликов в CSS. Серьезно, это безумие. Этот метод был придуман Joel Besada, и всегда был одним из наших любимых CSS-трюков.

Суть заключается в размещении CSS-стиля в CSS-переходе. Да, вы прочли все правильно, в CSS-переходе (transition). На самом деле, идея довольна проста. Она основана на применении псевдо-бесконечной задержки в изменении, что позволяет предотвратить возврат к исходному значению. Все наверное звучит запутанно, но на самом деле все просто. Пожалуйста, ознакомьтесь с кодом.

Как это работает

HTML-код

Click me!

I"m going to be red! It"s gonna be legen... Wait for it...

CSS-код

To-be-changed {
transition: all 0s 9999999s;
}

span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
Суть первого объявления заключается в задержке любых изменений на примерно 116 дней, что позволяет нам убедиться в том, что изменения останутся сразу, как только будут применены. Они не бесконечны, но похоже на то, не правда ли?

Но нам не нужно, чтобы изменения были применены через 116 дней после клика, нам нужно, чтобы все происходило незамедлительно! Итак, здесь нам нужно переписать задержку в момент клика (псевдо-класс:active) для того, чтобы применить изменения. Затем, когда клик будет произведен, старый параметр transition будет возвращен, возвращая параметр задержки на 9999999s, что предотвратит возврат к исходному положению.

Преимущества и недостатки

Преимущества:

* Невероятно хитрая задумка
* Сохраняет нужное значение при спуске кнопки, даже если переход еще не завершен (смотрите ниже)

Как заявил Joel Besada:

«здесь самое интересное заключается в том, что вы можете закончить переход на полпути, а параметр сохранит то же значение, которое у него было в конкретный момент перехода. К примеру, давайте предположим, что у нас есть линейный переход непрозрачности от 1 до 0 за 2 секунды, но мы продолжаем его всего 1 секунду. То есть, параметр непрозрачности должен остановиться на 0.5, так как задержка не позволяет параметру вернуться обратно. Если мы сейчас снова запустим переход в непрозрачности, он продолжится с 0.5, вместо того, чтобы воспроизводиться с начала».

Недостатки:

* Не очень хорошая браузерная поддержка (не поддерживается в IE9 и Opera Mini)
* Работает только с теми значениями, которые позволяют осуществлять переход
* Нет возможности вернуться назад к первичному значению
* На самом деле переход не бесконечен, если дождаться, пока пройдет 116 дней.

В завершение

Итак, на сегодняшний день, кое-как мы уже можем определять клики при помощи CSS. То есть, у нас есть возможность даже несмотря на то, что это больше нечто вроде хака. Некоторые методы лучше других подходят к конкретным ситуациям, но, в общем и целом, вряд ли стоит использовать это в реальном проекте.

Tab Atkins Jr. пару месяцев назад. Было написано целое предложение о положениях переключателей в CSS. Вы можете взглянуть на его работу:

Toggle-states: none | sticky? | infinity (initial: none)
toggle-group: none | (initial: none)
toggle-share: none | # (initial: none)
toggle-initial: (initial: 1)
…где:

* toggle-states представляет собой базовую функцию, которая позволяет включать/выключать функционал переключения. None означает отключенное положение, 2 и более отвечают за различные положения.

* toggle-group реализует функционал радио-кнопки. Если вы кликните по toggle-group элементу с установленным параметром отличным от none, все элементы, которые разделяют один и тот же toggle-group, будут автоматически выставлены на первое положение (выключены).

* toggle-share реализует функционал ярлыка. Когда вы кликаете по элементу с toggle-share, он действует так, будто вы кликнули по всем элементам, на которые он указывает.

* toggle-initial выставляет исходное положение переключателя.

Тем не менее, он признал, что его задумка не идеальна, и может повлечь за собой проблемы и парадоксы. Мы не хотим вдаваться в подробности в сегодняшней статье, так как это не входит в ее содержание, но рекомендуем вам ознакомиться с этой темой.

Итак, мы снова вернулись к javascript. Это, вероятно, лучший способ, если вам хочется надежности и сплоченности. Тем не менее, если вы хотите позабавиться, разрабатывая что-то на «чистом CSS-код», то наша статья точно окажется вам полезной.

Также хочется отметить, что Chris Coyier из CSS-Tricks еще два года назад об управлении двойными кликами при помощи CSS. Возможно, информация уже не актуальна, но все равно будет очень интересно познакомиться.

В любом случае, спасибо вам за чтение статьи! Пожалуйста, не забывайте и не стесняйтесь делиться результатами собственных экспериментов.

Внимание! У вас нет прав для просмотра скрытого текста.

Приветствую всех, кто желает разобраться в функционировании onclick (). Сегодняшняя статья поможет вам раз и навсегда понять принцип работы данного обработчика событий и разобрать конкретный пример onclick JavaScript, а точнее примеры.

Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!

Назначение обработчиков событий

Для начала разберем теоретическую часть вопроса. Практически все на своих страницах обрабатывают скрипты. А обычно это различные события. Чтобы все эти запрограммированные события сработали, для них необходимо установить обработчик.

По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick () . В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.

Различные способы назначения событийного обработчика

На сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.

Использование простых событий

Начнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:

Как вы видите, при нажатии на кнопку левой кнопкой мыши появляется сообщение «Клик-клик!». Хочу обратить ваше внимание на одну маленькую, но существенную деталь. Внутри alert можно использовать только одинарные кавычки (‘’).

Также в данном случае можно использовать ключевое слово this . Оно ссылается на текущий элемент и предоставляет все ему доступные методы.

Нажми на меня

Эта строка кода создает кнопку с текстом «Нажми на меня». После нажатия вы увидите на экране сообщение: «"Нажмиии!». Оно и заменит первое название кнопки.

Данный способ, бесспорно, очень прост. Однако он подходит только для аналогичных задач, т.е. вывода сообщений или выполнения простых команд.

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

В таком случае стоит прибегать к функциям.

Работа с функциями

Функции позволяют отделить нужный код в отдельный блок, который впоследствии можно вызывать через событийный обработчик в .

В качестве примера я прикрепил приложение для вывода пользователю результирующего числа в различных степенях, начиная с 1-ой и заканчивая 5-ой. Для этого я создал функцию countPow () , в которую можно передавать параметры. В моем приложении юзер должен вписать цифру в качестве переменной функции.

Таким образом, через обработчик, связанный с выше названной функцией, были выполнены вычисления и выведены на экран.

var result =1; function countPow(n) { for(var i=1; i