События в HTML

HTML CSS JavaScriptСобытия в 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. Именно события позволят вам сделать ваши веб-страницы динамическими.

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

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