События в Javascript

HTML события это такая "вещь", которая временами происходит с HTML элементами.

HTML событие может быть неким действием, которое делает браузер или пользователь.

При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.

Вот несколько примеров HTML событий:

  • HTML страница закончила загружаться
  • Поле ввода было изменено
  • Пользователь нажал на HTML кнопку

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

С одинарными кавычками:
<элемент событие='код JavaScript'>

С двойными кавычками:
<элемент событие="код JavaScript">

В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:


<button onclick="document.getElementById('demo').innerHTML = Date()">
	Какая сейчас дата и время?
</button>

В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с id="demo" и выведет в него текущую дату и время.

В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):


<button onclick="this.innerHTML = Date()">
	Какая сейчас дата и время?
</button>

Однако, очень редко можно увидеть код JavaScript, состоящий из одного выражения. Поэтому обычно в атрибут события записывают вызов JavaScript функции:


<button onclick="displayDate()">
	Какая сейчас дата и время?
</button>

Часто используемые HTML события

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

Событие Описание
onchange HTML элемент был изменен
onclick Пользователь кликнул мышкой на HTML элемент
onmouseover Пользователь навел мышку на HTML элемент
onmouseout Пользователь вывел мышку за пределы HTML элемента
onkeydown Пользователь нажал на клавишу клавиатуры
onload Браузер закончил загружать страницу

Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.

Что может делать JavaScript с событиями?

Обработчик событий можно использовать для обработки и проверки пользовательского ввода, действий пользователя и браузера:

  • Выполнять действия повторяющиеся после загрузки страницы
  • Выполнять действия повторяющиеся после закрытия страницы
  • Действия, которые должны выполняться при нажатии пользователем на кнопку
  • Проверка данных, введенных пользователем в поле формы
  • И многое другое ...

В JavaScript существует множество способов работать с событиями:

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