События в HTML представляют собой специальные глобальные атрибуты, которые используются в тегах для вызова обработчиков событий, написанных на различных языках сценариев (часто на JavaScript) и вызываемых при совершении пользователем на странице определённого действия.
В общем виде события выглядят так:
событие=»скрипт»
Располагаются события внутри тегов, этим они похожи на атрибуты. Ниже мы приведём примеры кода, а также перечислим события с указанием тегов, к которым они применимы.
Итак, вот пример кода страницы, на которой используется событие onkeyup. Это событие возникает в момент отпускания нажатой клавиши. В указанном примере нужно заполнить поле, используя только цифры. По мере набора символов происходит проверка на предмет того, какой символ введён. Если это не цифра, то выходит сообщение об ошибке.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Событие onkeyup</title> <style> #msg { color: red; /* Задаём цвет текста */ display: none; /* Скрываем сообщение */ } </style> <script> function validForm(f) { // Если введено число, то скрываем предупреждение if (isDigit(f.value)) document.getElementById("msg").style.display = "none"; // Иначе отображаем предупреждение else document.getElementById("msg").style.display = "inline"; } // Функция проверки введённых символов function isDigit(data) { var numStr="0123456789"; var k = 0; for (i=0;i<data.length;i++) { thisChar = data.substring(i, i+1); if (numStr.indexOf(thisChar) != -1) k++; } if (k == data.length) return 1; else return 0; } </script> </head> <body> <form action=""> <p>Введите любое число.</p> <p><input type="text" name="num" onkeyup="validForm(this)"> <span id="msg">Ошибка. Пожалуйста, введите число.</span></p> </form> </body> </html>
Как видите, в данном случае событие onkeyup «подсказало» момент запуска скрипта.
Перечислим используемые в HTML события. Начнём мы с событий окна, которые применяются с тегом <body>.
| Событие | Описание |
| onafterprint | Скрипт запустится после того, как документ будет распечатан. |
| onbeforeprint | Скрипт запустится до того, как документ будет распечатан. |
| onbeforeonload | Скрипт запустится до загрузки документа. |
| onblur | Скрипт запустится, если окно потеряет фокус. |
| onerror | Скрипт запустится, если произойдёт ошибка. |
| onfocus | Скрипт запустится, если окно получит фокус. |
| onhaschange | Скрипт запустится после изменения документа. |
| onload | Скрипт запустится после полной загрузки страницы (включая изображения, внешние таблицы стилей и внешние скрипты). |
| onmessage | Скрипт запустится при срабатывании сообщения. |
| onoffline | Скрипт запустится, если документ перейдёт в автономный режим. |
| ononline | Скрипт запустится, если документ окажется в сети. |
| onpagehide | Скрипт запустится, если окно будет скрыто. |
| onpageshow | Скрипт запустится, если окно станет видимым. |
| onpopstate | Скрипт запустится при изменении окна истории. |
| onredo | Скрипт запустится, если документ начнёт выполнять повтор. |
| onresize | Скрипт запустится при изменении размеров окна. |
| onstorage | Скрипт запустится при загрузке документа. |
| onundo | Скрипт запустится при выполнении команды «отмена» в документе. |
| onunload | Скрипт запустится при выходе пользователя из документа. |
Следующие события применимы для всех элементов HTML, но чаще всего применяются в формах. Некоторые из этих событий мы видели в таблице выше, но там они относились к окну, здесь же они повторяются для того, чтобы читатели понимали, что область применения данных событий не ограничивается только окном и тегом <body>.
| Событие | Описание |
| onblur | Скрипт запустится, если элемент потеряет фокус. |
| onchange | Скрипт запустится при изменении элемента. |
| oncontextmenu | Скрипт запустится при вызове контекстного меню. |
| onfocus | Скрипт запустится, если элемент получит фокус. |
| onformchange | Скрипт запустится при изменении формы. |
| onforminput | Скрипт запустится, если пользователь будет вводить данные в форму. |
| oninput | Скрипт запустится, если элемент начнёт получать пользовательский ввод. |
| oninvalid | Скрипт запустится, если элемент станет недействительным. |
| onselect | Скрипт запустится при выборе элемента. |
| onsubmit | Скрипт запустится при отправке формы. |
Следующие события также применимы ко всем элементам. Они связаны с действиями, выполняемыми пользователями посредством клавиатуры и мыши.
| Событие | Описание |
| onkeydown | Скрипт запустится при нажатии клавиши на клавиатуре. |
| onkeypress | Скрипт запустится после того, как клавиша на клавиатуре была нажата и отпущена. |
| onkeyup | Скрипт запустится при отпускании клавиши на клавиатуре. |
| onclick | Скрипт запустится при клике левой кнопкой мыши на элементе. |
| ondblclick | Скрипт запустится после двойного клика левой кнопкой мыши. |
| ondrag | Скрипт запустится при перетаскивании элемента. |
| ondragend | Скрипт запустится после завершения перетаскивания элемента. |
| ondragenter | Скрипт запустится, если элемент будет перенесён на допустимую зону падения. |
| ondragleave | Скрипт запустится, если элемент отпустят в действующей зоне падения. |
| ondragover | Скрипт запустится, если элемент будет вытащен за допустимую зону падения. |
| ondragstart | Скрипт запустится в начале операции перетаскивания элемента. |
| ondrop | Скрипт запустится после перетаскивания элемента при падении. |
| onmousedown | Скрипт запустится при нажатии кнопки мыши. |
| onmousemove | Скрипт запустится при перемещении указателя мыши. |
| onmouseout | Скрипт запустится, если указатель мыши будет перемещаться из элемента. |
| onmouseover | Скрипт запустится, если указатель мыши будет перемещаться над элементом. |
| onmouseup | Скрипт запустится при отпускании кнопки мыши. |
| onmousewheel | Скрипт запустится при нажатии на колёсико мыши. |
| onscroll | Скрипт запустится при прокручивании полосы прокрутки элемента. |
Последними в нашем перечне будут события, связанные с медиафайлами. Они тоже могут применяться ко всем элементам, но чаще всего встречаются в тегах <audio>, <embed>, <img>, <object> и <video>.
| Событие | Описание |
| onabort | Скрипт запустится при прерывании. |
| oncanplay | Скрипт запустится, если файл готов для воспроизведения. |
| oncanplaythrough | Скрипт запустится, если файл готов для воспроизведения от начала и до конце без перерывов на буферизацию. |
| ondurationchange | Скрипт запустится при изменении продолжительности медиафайла. |
| onemptied | Скрипт запустится, если файл стал недоступным. |
| onended | Скрипт запустится, если воспроизведение файла дошло до конца. |
| onerror | Скрипт запустится при возникновении ошибки при загрузке файла. |
| onloadeddata | Скрипт запустится при загрузке данных медиафайла. |
| onloadedmetadata | Скрипт запустится при загрузке метаданных. |
| onloadstart | Скрипт запустится при загрузке файла прежде, чем тот начнёт загружаться на самом деле. |
| onpause | Скрипт запустится, если воспроизведение файла поставлено на паузу. |
| onplay | Скрипт запустится при начале воспроизведения файла. |
| onplaying | Скрипт запустится при воспроизведении файла. |
| onprogress | Скрипт запустится, если веб-браузер находится в состоянии получения данных медиафайла. |
| onratechange | Скрипт запустится при изменении режима воспроизведения (например, при изменении скорости воспроизведения). |
| onreadystatechange | Скрипт запустится при изменении состояния готовности. |
| onseeked | Скрипт запустится, если атрибут seeked у тегов <audio> или <video> имеет значение «false», т.е. текущая позиция воспроизведения найдена. |
| onseeking | Скрипт запустится, если атрибут seeking у тегов <audio> или <video> имеет значение «true», т.е. текущая позиция воспроизведения перемещается. |
| onstalled | Скрипт запустится, если веб-браузер не сможет получить данные медиафайла. |
| onsuspend | Скрипт запустится, если получение данных медиафайла прекращается до окончания полной загрузки. |
| ontimeupdate | Скрипт запустится, если позиция воспроизведения изменилась. |
| onvolumechange | Скрипт запустится, если значение громкости звука изменилось (в том числе и при включении/отключении звука). |
| onwaiting | Скрипт запустится, если воспроизведении файла приостановлено, но ожидается возобновление воспроизведения (например, при буферизации). |
Итак, мы рассмотрели события в HTML. Именно события позволят вам сделать ваши веб-страницы динамическими.
Статьи по теме: