События HTML DOM на JavaScript

HTML DOM позволяет JavaScript реагировать на события HTML:

Мыши наведена!
Нажми меня

Реагировать на события

JavaScript может выполнять код в момент события, например, когда пользователь щелкает на某个 элемент HTML.

Чтобы выполнить код при щелчке пользователя на элементе, добавьте код JavaScript к свойству события HTML:

onclick=JavaScript

Примеры событий HTML:

  • Когда пользователь щелкает мышью
  • когда страница загружается
  • когда изображение загружается
  • когда мышь перемещается над элементом
  • когда изменяется поле ввода
  • когда форма HTML отправляется
  • когда пользователь нажимает клавишу

В этом примере, когда пользователь нажимает <h1> содержимое будет изменено:

пример

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">нажмите на этот текст!</h1>
</body>
</html>

Попробуйте сами

В этом примере функция вызывается из обработчика событий:

пример

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">нажмите на этот текст!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Попробуйте сами

атрибуты событий HTML

Если вы хотите назначить событие элементу HTML, вы можете использовать атрибут события.

пример

назначение события для элемента button onclick событие:

<button onclick="displayDate()">попробуйте</button>

Попробуйте сами

в предыдущем примере функция displayDate будет выполнена при нажатии на кнопку.

назначение событий с использованием HTML DOM

HTML DOM позволяет вам использовать JavaScript для назначения событий элементам HTML:

пример

для элемента button определить onclick событие:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Попробуйте сами

в предыдущем примере функция displayDate была привязана к элементу HTML с id="myBtn".

функция будет выполнена при нажатии на кнопку.

события onload и onunload

события будут инициированы, когда пользователь enters и leaves страницу. onload и событие onunload событие.

onload событие может быть использовано для определения типа и версии браузера посетителя, и на основе этой информации загрузить соответствующую версию веб-страницы.

onload и событие onunload событие может быть использовано для обработки cookie.

пример

<body onload="checkCookies()">

Попробуйте сами

событие onchange

событие onchange событие часто используется вместе с проверкой полей ввода.

ниже приведен пример того, как можно использовать событие onchange например. Когда пользователь изменяет содержимое поля ввода, вызывается функция upperCase().

пример

<input type="text" id="fname" 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.