Взаимодействие JavaScript с HTML обрабатывается через события, которые происходят, когда пользователь или браузер манипулируют страницей. Когда страница загружается, она называется событием. Когда пользователь нажимает кнопку, этот клик тоже является событием. Другие примеры включают такие события, как нажатие любой клавиши, закрытие окна, изменение размера окна и т.д.
Содержание:
Что такое событие?
Разработчики могут использовать эти события для выполнения JavaScript-кодированных ответов, которые заставляют кнопки закрывать окна, сообщения, которые будут отображаться для пользователей, данные, подлежащие проверке, и практически любой другой тип мыслимого(или не мыслимого) воображения.
События являются частью уровня Document Object Model (DOM) уровня 3, и каждый элемент HTML содержит набор событий, которые могут вызывать код JavaScript.
Событие onclick
Это наиболее часто используемый тип события, который возникает, когда пользователь нажимает левую кнопку мыши. Вы можете поместить свою проверку, предупреждение и т.д. Против этого типа события.
примерПопробуйте следующий пример.
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
Событие onsubmit
onsubmit - это событие, которое возникает, когда вы пытаетесь отправить форму. Вы можете поместить свою форму в соответствие с этим типом события.
В следующем примере показано, как использовать onsubmit. Здесь мы вызываем функцию validate() перед отправкой данных формы на веб-сервер. Если функция validate() возвращает true, форма будет отправлена, в противном случае она не представит данные.
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or 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 ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Стандартные события HTML 5
Стандартные события HTML5 перечислены здесь для справки. Здесь скрипт указывает на функцию Javascript, которая будет выполнена против этого события.
| Оператор | Описание |
|---|---|
| Offline | Триггеры, когда документ выходит в автономный режим |
| Onabort | Триггеры при событии прерывания |
| 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 | Триггеры при отпускании ключа |
| onload | Триггеры при загрузке документа |
| 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 | Триггеры, когда атрибут поиска элемента мультимедиа истинен, и поиск начался |
| onselect | Триггеры при выборе элемента |
| onstalled | Триггеры при возникновении ошибки в получении данных мультимедиа |
| onstorage | Триггеры при загрузке документа |
| onsubmit | Триггеры при отправке формы |
| onsuspend | Триггеры, когда браузер извлекает мультимедийные данные, но остановился до того, как весь медиафайл был извлечен |
| ontimeupdate | Триггеры, когда носители меняют свое игровое положение |
| onundo | Триггеры, когда документ выполняет отмену |
| onunload | Триггеры, когда пользователь покидает документ |
| onvolumechange | Триггеры, когда носитель изменяет громкость, также когда громкость установлена на "mute" |
| onwaiting | Триггеры, когда медиа перестали играть, но ожидается возобновление |
