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>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Щёлкните по тексту!</h1>
</body>
</html>

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

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

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

Примеры

Назначьте событие onclick элементу button:

<button onclick="displayDate()">Нажмите здесь</button>

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

В примере выше функция с именем displayDate будет выполнена, когда нажата кнопка.

Назначение событий с помощью HTML DOM

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

Примеры

Назначьте событие onclick элементу button:

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

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

В приведённом выше примере функция с именем displayDate назначается HTML-элементу с id="myBtn".

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

События 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 и onmouseout можно использовать для запуска функций, когда мышь пользователя перемещается по HTML-элементу или за его пределы.

Примеры

Простой пример onmouseover-onmouseout:

Наведи на меня

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

События onmousedown, onmouseup и onclick

События onmousedown, onmouseup и onclick составляют все части события щелчка мышью. Сначала, когда кнопка мыши нажата, срабатывает событие onmousedown; когда кнопка мыши отпущена, срабатывает событие onmouseup; наконец, когда щелчок мышью завершён, срабатывает событие onclick.

Примеры

Простой пример onmousedown-onmouseup:

Спасибо

Другие примеры

onmousedown и onmouseup
Заменяет изображение, когда пользователь нажимает кнопку мыши.

onload
Отобразите окно приглашения, когда страница завершит загрузку.

onfocus
Измените цвет фона поля ввода, когда оно получает фокус.

События мыши
Изменяйте цвет элемента, когда указатель перемещается по нему; когда указатель выходит за пределы текста, снова измените его цвет.

Другие расширения