JavaScript — События
Что такое событие?
Взаимодействие в JavaScript с HTML обрабатывается через события, которые происходят, когда пользователь или браузер манипулирует страницей.
При загрузке страницы, она называется событием. Когда пользователь нажимает на кнопку, то щелчок тоже событие. Другие примеры включают в себя такие события, как нажатие любой клавиши, закрытие окна, изменение размера окна и т.д.
Разработчики могут использовать эти события для выполнения ответов в JavaScript, которые вызывают кнопки закрытия окна, сообщения, которые будут отображаться для пользователей, данные, которые должны быть проверены, и практически любой другой тип реакции, который можно себе представить.
События являются частью объектной модели документа (Document Object Model — DOM) Level 3 и каждый HTML элемент содержит набор событий, которые могут вызвать JavaScript-код.
Здесь мы покажем несколько примеров, чтобы понять связь между Событием и JavaScript.
Тип события — onclick
Это наиболее часто используемый тип события, которое происходит, когда пользователь нажимает левую кнопку мыши. Вы можете поставить проверку, предупреждение и т.д., против этого типа события.
Пример
Попробуйте следующий пример.
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Привет мир!")
}
//-->
</script>
</head>
<body>
<p>Нажмите на следующую кнопку и посмотрите результат</p>
<form>
<input type="button" onclick="sayHello()" value="Привет" />
</form>
</body>
</html>Тип события — onsubmit
onsubmit это событие, которое происходит при попытке отправить форму. Вы можете поместить свою форму проверки в отношении этого типа события.
Пример
В следующем примере показано, как использовать событие onsubmit. Здесь мы вызываем функцию validate() перед отправкой формы данных на веб-сервер. Если функция validate() возвращает истину, форма будет отправлена, в противном случае она не будет предоставлять данные.
Попробуйте следующий пример.
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
вся проверка идет сюда
.........
возвращает либо true или false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
События onmouseover и onmouseout
Эти два типа событий поможет вам создать красивые эффекты с изображениями или даже с текстом. Событие OnMouseOver срабатывает, когда вы ставите указатель мыши на любой элемент и onmouseout срабатывает при перемещении мыши из этого элемента. Попробуйте следующий пример.
<html>
<head>
<script type="text/javascript">
<!--
function over() {
document.write ("Мышь над");
}
function out() {
document.write ("Выход мыши");
}
//-->
</script>
</head>
<body>
<p>Принесите мышь внутри элемента, чтобы увидеть результат:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> Это внутри элемента</h2>
</div>
</body>
</html>Стандартные события в HTML 5
Стандартные события в HTML 5 приведены здесь для справки. Здесь сценарий указывает на функцию Javascript, которая будет выполнена в соответствии этому событию.
| Атрибут | Стоимость | Описание |
|---|---|---|
| Offline | скрипт | Триггеры, когда документ переходит в автономный режим |
| Onboart | скрипт | Триггеры на события прерывания |
| onafterprint | скрипт | Триггеры после того, как документ напечатан |
| onbeforeonload | скрипт | Триггеры до загрузки документов |
| onbeforeprint | скрипт | Триггеры до печати документа |
| onblur | скрипт | Триггеры, когда окно теряет фокус |
| oncanplay | скрипт | Триггеры, когда медиафайлы могут начинают проигрываться, но может нужно остановить для буферизации |
| oncanplaythrough | скрипт | Триггеры, когда медиафайлы могут быть воспроизведены до конца, без остановки для буферизации |
| onchange | скрипт | Триггеры, когда изменяется элемент |
| onclick | скрипт | Триггеры мыши |
| oncontextmenu | скрипт | Триггеры, когда вызывается контекстное меню |
| ondblclick | скрипт | Триггеры на двойной щелчок мыши |
| ondrag | скрипт | Триггеры, когда элемент перетаскивается |
| ondragend | скрипт | Триггеры в конце операции перетаскивания |
| ondragenter | скрипт | Триггера, когда элемент перетащили к действительной цели перетаскивания |
| ondragleave | скрипт | Триггеры, когда элемент перетаскивается над действительной целью |
| ondragover | скрипт | Триггеры в начале операции перетаскивания |
| ondragstart | скрипт | Триггеры в начале операции перетаскивания |
| ondrop | скрипт | Триггеры при перетаскивании элемента при падении |
| ondurationchange | скрипт | Триггеры, когда длина медиафайла меняется |
| onemptied | скрипт | Триггеры, когда элемент ресурса медиафайла внезапно становится пустым. |
| onended | скрипт | Триггеры, когда медиафайл достигает конца |
| onerror | скрипт | Триггеры, когда возникает ошибка |
| onfocus | скрипт | Триггеры, когда окно получает фокус |
| onformchange | скрипт | Триггеры, когда форма меняет размеры |
| onforminput | скрипт | Триггеры, когда форма получает пользовательский ввод |
| onhaschange | скрипт | Триггеры, когда документ изменился |
| oninput | скрипт | Триггеры, когда элемент получает ввод пользователя |
| oninvalid | скрипт | Триггеры, когда элемент является недействительным |
| onkeydown | скрипт | Триггеры, при нажатии клавиши |
| onkeypress | скрипт | Триггеры, когда клавиша нажата и отпущена |
| onkeyup | скрипт | Триггеры, когда клавиша отпущена |
| в процессе | скрипт | Триггеры при загрузке документа |
| onloadeddata | скрипт | Триггеры, когда данные загружены на носитель |
| onloadedmetadata | скрипт | Триггеры, когда продолжительность и другие носители данных из медиа-элемента загружается |
| onloadstart | скрипт | Триггеры, когда браузер начинает загружать мультимедийные данные |
| onmessage | скрипт | Триггеры, когда сообщение срабатывает |
| onmousedown | скрипт | Триггеры, при нажатии кнопки мыши |
| onmousemove | скрипт | Триггеры, когда указатель мыши перемещается |
| onmouseout | скрипт | Триггеры, когда указатель мыши перемещается из элемента |
| onmouseover | скрипт | Триггеры, когда указатель мыши перемещается над элементом |
| onmouseup | скрипт | Триггеры при отпускании кнопки мыши |
| onmousewheel | скрипт | Триггеры, когда колесо мыши вращается |
| onoffline | скрипт | Триггеры, когда документ переходит в автономный режим |
| onoine | скрипт | Триггеры, когда документ поступает в Интернете |
| ononline | скрипт | Триггеры, когда документ поступает в Интернете |
| onpagehide | скрипт | Триггеры, когда окно скрыто |
| onpageshow | скрипт | Триггеры, когда окно становится видимым |
| onpause | скрипт | Триггеры, когда данные медиафайла приостановлены |
| onplay | скрипт | Триггеры, когда данные медиафайла собирается начать проигрывать |
| onplaying | скрипт | Триггеры, когда данные медиафайла начинают проигрывать |
| onpopstate | скрипт | Триггеры при изменении истории окна |
| onprogress | скрипт | Триггеры, когда браузер менят прогрессбар для медиафайла |
| onratechange | скрипт | Триггеры, когда скорость воспроизведения носителя данных изменилась |
| onreadystatechange | скрипт | Триггеры при изменении готовых состояний |
| onredo | скрипт | Триггеры, когда документ выполняет повтор |
| onresize | скрипт | Триггеры, при изменении размеров окна |
| onscroll | скрипт | Триггеры, когда полоса прокрутки в настоящее время прокручивается |
| onseeked | скрипт | Триггеры, когда атрибут поиска медиаэлемента больше не является истиной и поиск завершен |
| onseeking | скрипт | Триггеры, когда атрибут поиска медиа-элемента имеет значение true и поиск начался |
| onselect | скрипт | Триггеры, когда выбран элемент |
| onstalled | скрипт | Триггеры, когда есть ошибка в выборке данных медиафайла |
| onstorage | скрипт | Вызывается при загрузке документа |
| onsubmit | скрипт | Триггеры, когда форма была отправлена |
| onsuspend | скрипт | Триггеры, когда браузер извлекает данные мультимедиа, но останавливается до того, как был извлечен весь файл мультимедиа |
| ontimeupdate | скрипт | Триггеры, когда медиафайл меняет свое временное положение |
| onundo | скрипт | Триггеры, когда документ выполняет отмену |
| onunload | скрипт | Триггеры, когда пользователь покидает документ |
| onvolumechange | скрипт | Триггеры, когда медиафайл изменяет громкость, а также, когда громкость установлена на «без звука» |
| onwaiting | скрипт | Триггеры, когда медиафайл перестал играть, но, как ожидается возобновление |
