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 and onmouseup
Изменяет изображение, когда пользователь удерживает кнопку мыши.
onload
Отобразить окно предупреждения, когда страница завершит загрузку.
onfocus
Изменить цвет фона поля ввода, когда оно находится в фокусе.
События мыши
Изменение цвета элемента при наведении курсора на него.
Справочник по объекту события HTML DOM
Список всех событий HTML DOM можно найти в полном Справочнике по объекту события HTML DOM.
