DOM - События

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

Наведи курсор на меня
Нажми на меня

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

Код JavaScript может выполняться при возникновении каких-либо событий, вроде того, когда пользователь нажимает мышкой на HTML элемент.

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


onclick=код JavaScript

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

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

В следующем примере содержимое элемента <h1> изменяется, когда пользователь кликает на него мышкой:


<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ой!'">Click on this text!</h1>

</body>
</html>

В следующем примере JavaScript функция вызывается из обработчика события:


<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Нажми на этот текст!</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Ой!";
}
</script>

</body>
</html>

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

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

В следующем примере назначается обработчик события onclick для элемента кнопки. При нажатии пользователем на кнопку, выполняется функция displayDate:


<button onclick="displayDate()">Жми сюда!</button>

Назначение обработчика события при помощи HTML DOM

HTML DOM позволяет назначить HTML элементу обработчик события при помощи JavaScript.

В следующем примере в качестве обработчика события onclick элемента с id="myBtn" назначается функция displayDate. При нажатии пользователем на кнопку, функция выполняется:


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

События onload и onunload

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

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

Еще события onload и onunload могут использоваться для работы с файлами куки.


<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.

Нажми на меня