JavaScript HTML DOM События
HTML DOM позволяет JavaScript реагировать на HTML события:
Реакция на события
JavaScript может выполняться при возникновении события, например, когда пользователь кликает HTML элемент.
Чтобы выполнить код, когда пользователь кликает элемент, добавьте код JavaScript в атрибут события HTML:
onclick=JavaScript
Примеры событий HTML:
- Когда пользователь кликает мышью
- После загрузки веб-страницы
- Когда изображение загружено
- Когда указатель мыши перемещается по элементу
- При изменении поля ввода
- При отправке HTML-формы
- Когда пользователь нажимает клавишу
В этом примере содержимое элемента <h1> изменяется, когда пользователь нажимает на него:
Пример
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Нажмите на этот текст!</h1>
</body>
</html>
Попробуйте сами »
В этом примере функция вызывается из обработчика событий:
Пример
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Нажмите на этот текст!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Попробуйте сами »
Атрибуты событий HTML
Чтобы назначать события HTML-элементам, вы можете использовать атрибуты событий.
Пример
Назначьте событие onclick элементу кнопки:
<button onclick="displayDate()">Попробуй это</button>
Попробуйте сами »
В приведенном выше примере функция с именем displayDate будет выполняться при нажатии кнопки.
Назначить события с помощью HTML DOM
Модель HTML DOM позволяет назначать события элементам HTML с помощью JavaScript:
Пример
Назначьте событие onclick элементу кнопки:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Попробуйте сами »
В приведенном выше примере функция с именем displayDate назначается элементу HTML с id="myBtn".
Функция будет выполнена при нажатии кнопки.
События onload и onunload
События onload и onunload запускаются, когда пользователь входит или покидает страницу.
Событие onload можно использовать для проверки типа браузера посетителя и его версии, а также для загрузки правильной версии веб-страницы на основе информации.
События onload и onunload могут использоваться для работы с файлами cookie.
Событие onchange
Событие onchange часто используется в сочетании с проверкой полей ввода.
Ниже приведен пример использования onchange. Функция upperCase() будет вызываться, когда пользователь изменяет содержимое поля ввода.
События onmouseover и onmouseout
События onmouseover и onmouseout могут использоваться для запуска функции, когда пользователь наводит указатель мыши или убирает его с HTML-элемента:
События onmousedown, onmouseup и onclick
События onmousedown, onmouseup и onclick - это все части клика мышью. Сначала, когда нажимается кнопка мыши, запускается событие onmousedown, затем, когда кнопка мыши отпускается, запускается событие onmouseup, наконец, когда нажатие мыши завершается, запускается событие onclick.
Больше примеров
onmousedown и onmouseup
Изменить изображение, когда пользователь удерживает кнопку мыши.
onload
Отображать окно предупреждения, когда страница завершила загрузку.
onfocus
Изменить цвет фона поля ввода, когда оно окажется в фокусе.
События мыши
Изменить цвет элемента при наведении на него курсора.
Справочник по объекту события HTML DOM
Список всех событий HTML DOM смотрите в полном Справочнике по объектам событий HTML DOM на нашем сайте W3Schools на русском.
