События css: HTML Атрибуты события – События | htmlbook.ru

HTML События Атрибутов



HTML События Глобальных Атрибутов

В HTML 4 добавлена возможность запускать события в браузере, например, запускать JavaScript, когда пользователь нажимает на элемент.

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

Ниже приведены события глобальных атрибутов, которые могут быть добавлены в элементы HTML для определения действий событий.

= Новые атрибуты событий в HTML5.


События атрибутов Window

События для объекта Window (относится к тегу <body>):

Атрибут Значение Описание
onafterprint script Сценарий, запускаемый после печати документа
onbeforeprint script Сценарий, выполняемый перед печатью документа
onbeforeunload script Скрипт будет выполняться, когда документ будет выгружен
onerror script Сценарий для запуска при возникновении ошибки
onhashchange script Скрипт, запускаемый при изменении привязки URL
onload script Срабатывает после завершения загрузки страницы
onmessage script Сценарий для запуска при запуске сообщения
onoffline script Скрипт, запускаемый при запуске браузера в автономном режиме
ononline script Скрипт, запускаемый при запуске браузера в оперативном режиме
onpagehide script Скрипт, запускаемый при переходе пользователя со страницы
onpageshow script Сценарий, выполняемый при переходе пользователя на страницу
onpopstate script Скрипт, запускаемый при изменении истории окна
onresize script Срабатывает при изменении размера окна браузера
onstorage script Сценарий для запуска при обновлении области веб-хранилища
onunload script Срабатывает после выгрузки страницы (или закрытия окна браузера)

События формы

События, вызванные действиями внутри формы HTML (применяется практически ко всем элементам HTML, но чаще всего используется в элементах формы):

Атрибут Значение Описание
onblur script Запускает момент, когда элемент теряет фокус
onchange script Запускает момент изменения значения элемента
oncontextmenu script Скрипт, запускаемый при вызове контекстного меню
onfocus script Запускает момент, когда элемент получает фокус
oninput script Сценарий, который будет выполняться, когда элемент получает пользовательский ввод
oninvalid script Сценарий для запуска при недопустимом элементе
onreset script Срабатывает при нажатии кнопки сброса в форме
onsearch script Срабатывает, когда пользователь что-то пишет в поле поиска (для <input="search">)
onselect script
Срабатывает после выделения некоторого текста в элементе
onsubmit script Срабатывает при отправке формы

События клавиатуры

Атрибут Значение Описание
onkeydown script Срабатывает, когда пользователь нажимает клавишу
onkeypress script Срабатывает, когда пользователь нажимает клавишу
onkeyup script Срабатывает, когда пользователь отпускает клавишу

События мыши

Атрибут Значение Описание
onclick script Срабатывает по щелчку мыши на элементе
ondblclick script Срабатывает при двойном щелчке мышью по элементу
onmousedown script Срабатывает при нажатии кнопки мыши на элементе
onmousemove script Срабатывает, когда указатель мыши перемещается над элементом
onmouseout script Срабатывает, когда указатель мыши покидает элемент
onmouseover script Срабатывает при наведении указателя мыши на элемент
onmouseup script Срабатывает при отпускании кнопки мыши над элементом
onmousewheel script Возражать. Используйте атрибут onwheel
onwheel script Срабатывает, когда колесо мыши катится вверх или вниз по элементу

События перетаскивания

Атрибут Значение Описание
ondrag script Скрипт, запускаемый при перетаскивании элемента
ondragend script Скрипт, запускаемый в конце операции перетаскивания
ondragenter script Скрипт, запускаемый при перетаскивании элемента в допустимый целевой объект
ondragleave script Сценарий для запуска, когда элемент оставляет допустимый целевой объект отбрасывания
ondragover script Скрипт, запускаемый при перетаскивании элемента по допустимому целевому объекту
ondragstart script Сценарий для запуска в начале операции перетаскивания
ondrop script Скрипт, запускаемый при перетаскивании элемента
onscroll script Скрипт, запускаемый при прокрутке полосы прокрутки элемента

События буфера обмена

Атрибут Значение Описание
oncopy script Срабатывает, когда пользователь копирует содержимое элемента
oncut script Срабатывает, когда пользователь вырезает содержимое элемента
onpaste script Срабатывает, когда пользователь вставляет некоторое содержимое в элемент

События медиа

События, вызванные СМИ, как видео, изображения и аудио (применяется ко всем элементам HTML, но чаще всего встречается в элементах мультимедиа, <audio>, <embed>, <img>, <object>, и <video>).

Совет: Посмотрите наши Аудио HTML и Справочник Видео DOM для дополнительной информации.

Атрибут Значение Описание
onabort script Сценарий для запуска при прерывании
oncanplay script Сценарий для запуска, когда файл готов для начала воспроизведения (когда он достаточно буферизован, чтобы начать)
oncanplaythrough script Скрипт должен быть запущен, когда файл может быть воспроизведен до конца без паузы для буферизации
oncuechange script Сценарий, который будет выполняться при изменении ключа в элементе <track>
ondurationchange script Сценарий для запуска при изменении длины носителя
onemptied script Сценарий, который нужно запустить когда что-то плохое случается и архив внезапно недоступен (как непредвиденно разъединения)
onended script Скрипт должен быть запущен, когда в СМИ уже дойдет до конца (полезное мероприятие для сообщения "спасибо за прослушивание")
onerror script Сценарий для запуска при возникновении ошибки при загрузке файла
onloadeddata script Сценарий для запуска при загрузке данных мультимедиа
onloadedmetadata script Скрипт, запускаемый при загрузке метаданных (например, измерений и длительности)
onloadstart script Скрипт должен быть запущен как и файл начинает загружаться до чего загружаемого
onpause script Сценарий, запускаемый при приостановке носителя пользователем или программным способом
onplay script Скрипт должен быть запущен, когда СМИ готовы начать играть
onplaying script Сценарий для запуска, когда носитель фактически начал играть
onprogress script Сценарий для запуска, когда браузер находится в процессе получения данных мультимедиа
onratechange script Сценарий для запуска при каждом изменении скорости воспроизведения (например, когда пользователь переключается в режим замедленной или быстрой перемотки вперед)
onseeked script Сценарий, который будет выполняться, когда атрибут поиска имеет значение false, указывающее, что поиск закончился
onseeking script Сценарий, который будет выполняться, если атрибут поиска имеет значение true, указывающее, что поиск активен
onstalled script Скрипт должен быть запущен, когда браузер не может получить данные по какой-либо причине
onsuspend script Скрипт, запускаемый при получении данных мультимедиа, останавливается перед полной загрузкой по какой-либо причине
ontimeupdate script Скрипт для запуска при изменении игровой позиции (пример, когда потребитель голодает препровождает к различному пункту в средствах)
onvolumechange script Скрипт будет выполняться каждый раз, когда объем изменяется, что (включает установку громкости на "беззвучный")
onwaiting script Сценарий для запуска, когда носитель приостановлен, но, как ожидается, возобновится (например, когда носитель приостанавливает буферизацию данных)

События разные

Атрибут Значения Описание
onshow script Срабатывает, когда элемент <menu> отображается как контекстное меню
ontoggle script Срабатывает, когда пользователь открывает или закрывает элемент <details>

Обработка события click на CSS

Вы здесь: Главная - CSS - CSS Основы - Обработка события click на CSS

Обработка события click на CSS

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.

Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на

JavaScript, но на самом деле, в данном случае, событие click легко обработается через CSS.

Для начала самый обычный HTML-код:

<div>
  <div>Содержимое 1</div>
  <div>Вкладка 1</div>
</div>
<div>
  <div>Содержимое 2</div>
  <div>Вкладка 2</div>
</div>

Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код:

.tabs {
  float: left; /* Все вкладки располагаем в одну строку */
  margin: 10px; /* Отступы вкладок друг от друга */
}
.content {
  display: none; /* Скрываем содержимое */
  padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */
  position: absolute; /* Чтобы содержимое не двигало элементы на странице */
}
.tabs:active .content {
  display: block; /* Когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
  display: block; /* Пока курсор наведён на контент, не закрываем его */
}

Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active, но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит "держать" контент наведение курсора.

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

  • Обработка события click на CSS Создано 17.10.2012 07:38:03
  • Обработка события click на CSS Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

HTML атрибуты-события

onafterprint Возникает, когда страница выводится на печать
onbeforeprint Возникает перед подачей страницы на печать
onbeforeunload Возникает перед тем, как документ будет выгружен
onblur Возникает, когда элемент теряет фокус
onchange Возникает, когда значение элемента изменяется
onclick Возникает, когда пользователь нажимает мышью на элемент
oncontextmenu Возникает, когда вызывается контекстное меню
oncopy Возникает, когда пользователь копирует содержимое элемента
oncut Возникает, когда пользователь вырезает содержимое элемента
ondblclick Возникает при двойном нажатии мышью на элемент
ondrag Возникает, когда пользователь перетаскивает элемент
ondragend Возникает, когда пользователь заканчивает перетаскивать элемент
ondragenter Возникает, когда перетаскиваемый элемент входит в принимающий элемент
ondragleave Возникает, когда перетаскиваемый элемент покидает принимающий элемент
ondragover Возникает, когда перетаскиваемый элемент проходит над принимающим элементом
ondragstart Возникает, когда пользователь начинает перетаскивать элемент
ondrop Возникает, когда пользователь "сбрасывает" перетаскиваемый элемент
onerror Возникает, если при загрузки внешнего файла произошла ошибка
onfocus Возникает, когда элемент получает фокус
onhashchange Возникает, когда изменяется анкорная часть URL
oninput Возникает, когда в элементе начинается пользовательский ввод
oninvalid Возникает, если неверно введено поле формы
onkeydown Возникает, когда пользователь нажимает какую-нибудь клавишу клавиатуры
onkeypress Возникает, когда пользователь нажал на какую-нибудь клавишу клавиатуры
onkeyup Возникает, когда пользователь отпускает нажатую клавишу клавиатуры
onload Возникает, когда объект загружен
onmousedown Возникает, когда нажимают кнопку мыши на каком-либо элементе
onmousemove Возникает, когда указатель движется над элементом
onmouseout Возникает, когда указатель выходит за пределы элемента
onmouseover Возникает, когда указатель выходит в пределы элемента
onmouseup Возникает, когда отпускают нажатую кнопку мыши на каком-либо элементе
onoffline Возникает, когда браузер переходит в режим оффлайн
ononline Возникает, когда браузер переходит в режим онлайн
onpageshow Возникает, когда пользователь переходит на страницу
onpaste Возникает, когда пользователь вставляет контент из буфера обмена
onreset Возникает, когда форма сбрасывается
onresize Возникает при изменении размера окна браузера
onscroll Возникает, когда прокручивается полоса прокрутки элемента
onsearch Возникает, когда пользователь отправит запрос в поле поиска
onselect Возникает, когда пользователь выделяет текст внутри элемента
onshow Возникает, когда элемент <menu> выводится, как контекстное меню
onsubmit Возникает при отправке формы
ontoggle Возникает, когда элемент <details> открывается или закрывается
onunload Возникает, когда пользователь выгружает страницу
onwheel Возникает, когда элементе прокручивается колесо мыши

Событие onmouseover | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 7.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Описание

Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover. Это один из самых популярных атрибутов, применяемый для создания различных эффектов с изображениями и другими объектами веб-страницы. Обычно работает в связке с событием onmouseout.

Синтаксис

onmouseover="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmouseover</title>
 </head>
 <body>
  <p><img src="images/graph2.png" alt=""
  
  >&nbsp;
  <img src="images/graph2.png" alt=""
   
  ></p>
 </body>
</html>

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

Рис. 1. Использование события onmouseover

Браузеры

Internet Explorer до версии 7.0 содержит ошибку при работе с изображениями, события onmouseover и onmouseout для тега <img> не обрабатываются.

Событие onblur | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Описание

Событие onblur возникает при потере элемента фокуса. Это обычно происходит, если щелкнуть на другой элемент текущего документа. Событие onblur противоположно по своему действию событию onfocus.

Синтаксис

onblur="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onblur</title>
 </head> 
 <body>
  <form action=""> 
   <p><input type="text" value="Имя" onblur="alert(this.value)"></p>
   <p><input type="text" value="Фамилия" onblur="alert(this.value)"></p>
   <p><input type="text" value="Адрес" onblur="alert(this.value)"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При потере фокуса с помощью функции alert на экран выводится значение текущего поля.

Рис. 1. Вызов скрипта при потере фокуса

Практическое применение CSS свойства pointer-events » POSITIVECRASH.COM

Что такое pointer-events

CSS свойство pointer-events было опубликовано в CSS4-UI в качестве дополнения к CSS3 свойствам.
W3C.org заявляет в спецификации:

The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go “through” an element and target whatever is “underneath” that element instead. This also applies to other “hit testing” behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint()

Таким образомpointer-events – это свойство, позволяющее контролировать когда, как и может ли вообще указатель устройства (чаще всего мышь) взаимодействовать с элементом.

pointer-events: none предотвращает события указателя (как правило, мыши) для элемента: hover, active, click и т.п., в том числе и JavaScript событие click.

pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом.

Есть и другие значения свойства pointer-events, но они используются только при работе с SVG и я их не буду здесь рассматривать.

Небольшая особенность pointer-events, которую обязательно нужно учитывать

Предположим, вы установили для элемента JavaScript отслеживание события click. Затем выставили для него свойство pointer-events: none, а после этого опять поменяли этому элементу значение свойства pointer-events на auto. Тогда JavaScript, вызываемый при событии onclick, будет вызван опять при изменении значения свойства  pointer-events на auto.

Кроссбраузерность pointer-events

Pointer-events, на удивление, поддерживается многими версиями браузеров. Но всё же подобные свойства нужно использовать аккуратно, чтобы не лишать пользователей возможности пользоваться основными функциями web приложения в старых версиях браузеров.

Так как же использовать pointer-events без вреда для кроссбраузерности? Можно воспользоваться Modernizr библиотекой для определения поддержки браузера этого свойства. А можно принять во внимание, что по сути подобная проблема возникнет в старой версии IE (так как другие браузеры обычно автоматически обновляются) и воспользоваться условными комментариями, если это возможно (пример 3).

Применение CSS свойства pointer-events на практике

Применений pointer-events в верстке можно найти в принципе столько, насколько у верстальщика хватит фантазии и потребностей. Есть парочка применений, которые и мне кажутся полезными. Напишу о них подробнее.

1. Предотвращение взаимодействия с изображениями

Если, к примеру, вы не хотите, чтобы у пользователя была возможность кликнуть правой кнопкой мыши по размещенному на сайте фото, то вы можете воспользоваться свойством pointer-event. Спасет ли это от незаконного копирования? Вряд ли…но жизнь воришке слегка подпортит.

See the Pen zKDev by Anastasiia Bakai (@positivecrash) on CodePen.


Правой картинке задано как раз свойство pointer-events. Попробуйте на практике покликать.

2. Ускорения скролла

Давненько уже было описано, что скролл – тяжелая процедура, при которой перерисовывается контент. Там же написано, что события для элемента такие, как hover, click и т.п. так же требуют перерисовки элементов, соответственно замедляют работу браузера. На хабре был предложен метод, который позволяет уменьшить подобную нагрузку на браузер как раз с помощью свойства pointer-event! Описывать тут метод не буду, в статье все хорошо описано. Способ, надо сказать, заманчивый. И возможно даже не будет никаких казусов в связи с особенностью обработки JavaScript, описанной мною выше.

3. Дизайн-элементы поверх интерактивных карт

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

Она понравилась моему начальнику и всё бы ничего..но вот в Illustrator я наложила на карту тени, а в вёрстке как быть? Тут на помощь как раз придёт CSS свойство pointer-events, который позволит наложить декоративные элементы поверх карты, при этом не “закрывая” области интерактивной карты от взаимодействия с пользователем.  Как вы уже догадались, я просто добавлю строчку

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

4. Другие забавные примеры pointer-event

Пример 4.1: png изображение поверх текста

Пример 4.2: png изображение поверх галереи, презабавнейший эффект

Пример 4.3: очень сложный красивый пример

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

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