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 | Возражать. Используйте атрибут 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>).
Совет:
| Атрибут | Значение | Описание |
|---|---|---|
| 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 | Срабатывает, когда пользователь открывает или закрывает элемент <details> |
Обработка события click на CSS
Вы здесь: Главная — CSS — 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, что всегда хорошо.
-
Создано 17.10.2012 07:38:03 -
Михаил Русаков
Создано 17.10.2012 07:38:03
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
| 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=""
>
<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: очень сложный красивый пример