Event — Интерфейсы веб API

Интерфейс Event представляет собой любое событие, которое происходит в DOM; некоторые из них генерируемые пользователем (клик мышью или нажатие клавиши на клавиатуре), а некоторые — генерируемые API (события, обозначающие завершение процесса анимации, приостановка видео и т.д.). Существует много типов событий, некоторые из них используют интерфейсы, базирующиеся на главном интерфейсе Event. Event содержит общие свойства и методы для всех событий.

Ниже приведён список интерфейсов, основанных на главном интерфейсе Event, а также указаны ссылки на них в документации MDN API. Заметьте, что имена всех интерфейсов оканчиваются на «Event».

  • AnimationEvent
  • AudioProcessingEvent (en-US)
  • BeforeInputEvent
  • BeforeUnloadEvent
  • BlobEvent (en-US)
  • ClipboardEvent
  • CloseEvent (en-US)
  • CompositionEvent (en-US)
  • CSSFontFaceLoadEvent
  • CustomEvent (en-US)
  • DeviceLightEvent
  • DeviceMotionEvent (en-US)
  • DeviceOrientationEvent (en-US)
  • DeviceProximityEvent (en-US)
  • DOMTransactionEvent
  • DragEvent (en-US)
  • EditingBeforeInputEvent
  • ErrorEvent (en-US)
  • FetchEvent
  • FocusEvent     (en-US)
  • GamepadEvent
  • HashChangeEvent (en-US)
  • IDBVersionChangeEvent (en-US)
  • InputEvent
  • KeyboardEvent
  • MediaStreamEvent (en-US)
  • MessageEvent (en-US)
  • MouseEvent
  • MutationEvent (en-US)
  • OfflineAudioCompletionEvent (en-US)
  • PageTransitionEvent (en-US)
  • PointerEvent (en-US)
  • PopStateEvent (en-US)
  • ProgressEvent (en-US)
  • RelatedEvent
  • RTCDataChannelEvent (en-US)
  • RTCIdentityErrorEvent
  • RTCIdentityEvent
  • RTCPeerConnectionIceEvent (en-US)
  • SensorEvent
  • StorageEvent (en-US)
  • SVGEvent (en-US)
  • SVGZoomEvent
  • TimeEvent (en-US)
  • TouchEvent
  • TrackEvent
    (en-US)
  • TransitionEvent (en-US)
  • UIEvent (en-US)
  • UserProximityEvent (en-US)
  • WebGLContextEvent (en-US)
  • WheelEvent (en-US)
Event()

Создаёт объект Event и возвращает его вызывающему.

Event.bubbles Только для чтения

Логическое значение, указывающее, всплыло ли событие вверх по DOM или нет.

Event.cancelBubble (en-US)

Историческое название синонима Event.stopPropagation(). Если установить значение в true до возврата из обработчика события (Event Handler), то событие не будет распространяться дальше (например, на обработчики для родительских узлов).

Event.cancelable Только для чтения

Логическое значение, показывающее возможность отмены события.

Event.composed (en-US) Только для чтения

Логическое значение, показывающее может или нет событие всплывать через границы между shadow DOM (внутренний DOM конкретного элемента) и обычного DOM документа.

Event.currentTarget
Только для чтения

Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие. Это объект, которому планируется отправка события; поведение можно изменить с использованием перенаправления (retargeting).

Event.deepPath (en-US) Non-standard

Массив DOM-узлов, через которые всплывало событие.

Event.defaultPrevented Только для чтения

Показывает, была ли для события вызвана функция

event.preventDefault().

Event.eventPhase Только для чтения

Указывает фазу процесса обработки события.

Event.explicitOriginalTarget (en-US) Non-standard Только для чтения

Явный первоначальный целевой объект события (Mozilla-специфичный). Не может содержать анонимного контента.

Event.originalTarget (en-US)
Non-standard Только для чтения

Первоначальный целевой объект события до перенаправлений (Mozilla-специфичный). Может быть из анонимного контента.

Event.returnValue (en-US) Non-standard

Нестандартная альтернатива (оставшаяся от старых версий Microsoft Internet Explorer) для Event.preventDefault() и Event.defaultPrevented.

Event.scoped (en-US) Только для чтения Этот API вышел из употребления и его работа больше не гарантируется.

Логическое значение, показывающее всплывает ли данное событие через shadow root (внутренний DOM-элемента). Это свойство было переименовано в composed (en-US).

Event.srcElement Non-standard

Нестандартный синоним (остался от старых версий Microsoft Internet Explorer) для Event.target.

Event.target
Только для чтения

Ссылка на целевой объект, на котором произошло событие.

Event.timeStamp Только для чтения

Время, когда событие было создано (в миллисекундах). По спецификации это время от начала Эпохи (Unix Epoch), но в действительности в разных браузерах определяется по-разному; кроме того, ведётся работа по изменению его на DOMHighResTimeStamp тип.

Event.type Только для чтения

Название события (без учёта регистра символов).

Event.isTrusted Только для чтения

Показывает было или нет событие инициировано браузером (например, по клику мышью) или из скрипта (например, через функцию создания события, такую как event.

initEvent (en-US))

Event.createEvent() (en-US)

Создаёт новое событие, которое затем должно быть проинициализировано вызовом его метода initEvent().

Event.initEvent() Deprecated

Инициализация значений созданного с помощью Document.createEvent() (en-US) события. Если событие уже отправлено, то эта функция ничего не делает.

Event.preventBubble()
Non-standard Вышла из употребления с версии Gecko 24

Предотвращает всплытие события. Устаревшая, используйте вместо неё event.stopPropagation.

Event.preventCapture() Non-standard Вышла из употребления с версии Gecko 24

Устаревшая, используйте вместо неё event. stopPropagation.

Event.preventDefault()

Отменяет событие (если его возможно отменить).

Event.stopImmediatePropagation()

Для конкретного события не будет больше вызвано обработчиков. Ни тех, которые привязаны к этому же элементу (на котором работает обработчик, который вызывает этот Event.stopImmediatePropagation()), ни других, которые могли бы вызваться при распространении события позже (например, в фазе перехвата — capture).

Event.stopPropagation()

Остановка распространения события далее по DOM.

Event.getPreventDefault() Non-standard

Нестандартная. Возвращает значение Event.defaultPrevented. Используйте вместо неё Event.defaultPrevented.

Specification
DOM Standard
# interface-event

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Типы событий: Event reference (en-US)
  • Сравнение Event Targets (target и currentTarget и relatedTarget и originalTarget)
  • Creating and triggering custom events (en-US)
  • Для разработчиков дополнений Firefox:
    • Listening to events in Firefox extensions
    • Listening to events on all tabs
  • Mozilla related events in real life at wiki.mozilla.org

Last modified: , by MDN contributors

События в Javascript

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

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

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

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

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

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

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

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

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

<button>
	Какая сейчас дата и время?
</button>

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

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

<button>
	Какая сейчас дата и время?
</button>

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

<button>
	Какая сейчас дата и время?
</button>

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

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

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

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

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

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

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

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

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

— веб-API | MDN

Интерфейс Event представляет событие, происходящее в DOM.

Событие может быть вызвано действием пользователя, например. щелчок по кнопке мыши или нажатие на клавиатуру или сгенерированный API для представления хода выполнения асинхронной задачи. Его также можно запустить программно, например, вызвав метод HTMLElement.click() элемента или определив событие, а затем отправив его в указанную цель, используя EventTarget.dispatchEvent() .

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

Многие элементы DOM можно настроить так, чтобы они принимали (или «прослушивали») эти события и выполняли код в ответ на их обработку (или «обработку»). Обработчики событий обычно подключаются (или «прикрепляются») к различным элементам HTML (таким как

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

В приведенном выше примере код JavaScript изменяет содержимое элемент с.

В следующем примере код изменяет содержимое собственный элемент (используя this .innerHTML ):

Пример


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

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

Пример

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

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

Вот список некоторых распространенных HTML-событий события:

Событие Описание
на смену Элемент HTML был изменен
по клику Пользователь щелкает элемент HTML
при наведении мыши Пользователь наводит указатель мыши на элемент HTML
onmouseout Пользователь уводит указатель мыши от элемента HTML
нажатие клавиши Пользователь нажимает клавишу клавиатуры
под нагрузкой Браузер завершил загрузку страницы

Список намного длиннее: W3Schools JavaScript Reference HTML DOM Events.

Обработчики событий JavaScript

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

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

Можно использовать множество различных методов, позволяющих JavaScript работать с событиями:

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

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

Проверьте себя с помощью упражнений

Упражнение:

Элемент

Начать упражнение

❮ Предыдущий Следующий ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9004 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

No related posts.