События JavaScript

События HTML — это «события», происходящие с элементами HTML.

Когда JavaScript используется на странице HTML, JavaScript может «реагировать» на эти события.

События HTML

События HTML могут быть действиями браузера или пользователя.

Ниже приведены примеры событий HTML:

  • HTML-страница завершает загрузку
  • HTML-поле ввода изменено
  • HTML-кнопка нажата

Обычно, когда событие происходит, пользователь хочет сделать что-то.

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

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

Используйте одинарные кавычки:

<element event='Некоторые JavaScript>

Используйте двойные кавычки:

<element event="Некоторые JavaScript">

В следующем примере:onclick Атрибуты (и код) добавляются к <button> Элемент:

Пример

<button onclick='document.getElementById("demo").innerHTML=Date()'>Сколько сейчас времени?</button>

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

В предыдущем примере код JavaScript изменил содержимое элемента с id="demo":

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

Пример

<button onclick="this.innerHTML=Date()">Сколько сейчас времени?</button>

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

Код на JavaScript обычно содержит много строк. Чаще всего вызываются функции через атрибуты событий:

Пример

<button onclick="displayDate()">Сколько сейчас времени?</button>

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

Общие события HTML

Ниже приведены некоторые общие события HTML:

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

Полный список:Руководство CodeW3C.com JavaScript HTML DOM события.

Что может сделать JavaScript?

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

  • Что нужно сделать при загрузке страницы
  • Что нужно сделать при закрытии страницы
  • Действие, которое должно выполняться при нажатии кнопки пользователем
  • Содержимое, которое должно быть проверено при вводе пользователя
  • И так далее

Есть много способов обработки событий с помощью JavaScript:

  • Свойства событий HTML могут выполнять код JavaScript
  • Свойства событий HTML могут вызывать функции JavaScript
  • Вы можете分配 свои собственные обработчики событий HTML элементам
  • Вы можете предотвратить отправку или обработку события
  • И так далее

Вы узнаете больше о событиях и обработчиках событий в разделе HTML DOM.