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 можно использовать атрибуты событий.
Пример
Assign an onclick event to a button element:
<button onclick="displayDate()">Try it</button>
В приведенном выше примере функция с именем DisplayDate будет выполняться при нажатии кнопки.
Назначение событий с помощью HTML DOM
HTML DOM позволяет назначать события элементам HTML с помощью JavaScript:
Пример
Назначьте событие OnClick элементу Button:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
В приведенном выше примере функция с именем DisplayDate присваивается HTML-элементу с идентификатором = "myBtn".
Функция будет выполнена при нажатии кнопки.
События OnLoad и Unload
События OnLoad и Unload инициируются, когда пользователь вводит или покидает страницу.
Событие OnLoad может использоваться для проверки типа браузера посетителя и версии браузера и загрузки соответствующей версии веб-страницы на основе информации.
События OnLoad и Unload могут использоваться для борьбы с файлами cookie.
Пример
<body onload="checkCookies()">
Событие onChange
Событие onChange часто используется в сочетании с проверкой полей ввода.
Ниже приведен пример использования OnChange. Функция верхнего регистра () будет вызываться, когда пользователь изменяет содержимое поля ввода.
Пример
<input type="text" id="fname"
onchange="upperCase()">
События наведении курсора мыши
Для запуска функции при наведении курсора мыши на элемент HTML или из него можно использовать события наведении курсора мыши и onmouse:
События OnMouseDown, OnMouseUp и OnClick
События OnMouseDown, OnMouseUp и OnClick являются частями щелчка мышью. Во-первых, при нажатии кнопки мыши, инициируется событие OnMouseDown, затем, когда кнопка мыши освобождается, инициируется событие OnMouseUp, и, наконец, когда щелчок мыши завершается, инициируется событие OnClick.
Ссылка на объект события HTML DOM
Чтобы просмотреть список всех событий HTML DOM, посмотрите на нашу полную ссылку на объект события HTML DOM.
