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 события могут быть использованы , чтобы иметь дело с печеньем.
onchange событие
onchange событие часто используется в сочетании с проверкой полей ввода.
Ниже приведен пример того , как использовать onchange . upperCase() функция будет вызываться , когда пользователь изменяет содержимое поля ввода.
В onmouseover и onmouseout События
onmouseover и onmouseout событий могут быть использованы , чтобы вызвать функцию , когда пользователь удерживает указатель мыши над, или из, HTML - элемента:
onmousedown , onmouseup и onclick События
onmousedown , onmouseup и onclick события являются все части мыши. Во- первых , когда кнопка мыши нажата, то onmousedown событие срабатывает, а затем, когда кнопка мыши отпускается, onmouseup событие срабатывает, наконец, когда щелчок мыши завершается, onclick событие.
Еще примеры
OnMouseDown и OnMouseUp
Изменение изображения, когда пользователь держит нажатой кнопку мыши.
в процессе
Показать окно предупреждения, когда после загрузки страницы.
OnFocus
Изменение цвет фона поля ввода, когда он получает фокус.
События мыши
Измените цвет элемента, когда курсор перемещается над ним.
Ссылка на объект HTML DOM Event
Для получения списка всех событий HTML DOM, смотрите на нашем полный HTML DOM Event Object Reference .
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »