События 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!'">Click on this text!</h1>
</body>
</html>
В этом примере функция вызывается из обработчика события:
Пример
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Атрибуты HTML-событий
Чтобы назначать события элементам HTML, вы можете использовать атрибуты событий.
Пример
Назначьте событие onclick элементу кнопки:
<button onclick="displayDate()">Try it</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.
Пример
<body onload="checkCookies()">
Событие onchange
Событие onchange
часто используется в сочетании с проверкой полей ввода.
Ниже приведен пример использования onchange. Функция upperCase()
будет вызываться, когда пользователь изменяет содержимое поля ввода.
Пример
<input type="text" id="fname"
onchange="upperCase()">
События onmouseover и onmouseout
События onmouseover
and onmouseout
можно использовать для запуска функции, когда пользователь наводит указатель мыши на элемент HTML или выходит из него:
События onmousedown, onmouseup и onclick
События onmousedown
, onmouseup
, и onclick
являются частями щелчка мыши. Сначала при нажатии кнопки мыши запускается событие onmousedown, затем, когда кнопка мыши отпускается, запускается событие onmouseup, наконец, когда щелчок мыши завершается, запускается событие onclick.
Дополнительные примеры
Изменение изображения, когда пользователь удерживает нажатой кнопку мыши.
Отображение окна предупреждения, когда страница завершит загрузку.
Изменение цвета фона поля ввода, когда оно получает фокус.
Изменение цвета элемента при наведении на него курсора.
Справочник по объекту события HTML DOM
Список всех событий HTML DOM см. в нашем полном справочнике по объектам событий HTML DOM .