Event js что это

Объект события Event

Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой Mouse Event или ввод с клавиатуры Keyboard Event . Существует множество различных событий с разным набором информации.

Обратите внимание на обзорную статью о событиях. В ней описываются примеры работы с событиями.

Пример

Скопировать ссылку «Пример» Скопировано

Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.

При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click , обработчик будет вызван с событием Mouse Event :

 element.addEventListener('click', function (event)  console.log(event)>) element.addEventListener('click', function (event)  console.log(event) >)    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Свойства

Скопировать ссылку «Свойства» Скопировано

• bubbles — является ли данное событие всплывающим.
• cancelable — является ли событие отменяемым.
• current Target — указывает на элемент, на котором установлен обработчик события.
• default Prevented — отменено ли поведение события по умолчанию.
• event Phase — указывает на фазу срабатывания события.
• is Trusted — указывает на происхождение события, будет в значении true , если событие инициировано действиями пользователя. false — если событие инициировано из кода с помощью dispatch Event ( ) .
• target — ссылка на объект, которым было инициировано событие. Например, если событие произошло на поле ввода, мы получим ссылку на этот DOM элемент.
• time Stamp — время возникновения события в миллисекундах.
• type — тип события.

Методы

Скопировать ссылку «Методы» Скопировано

• composed Path ( ) — вернёт массив элементов, на которых сработает событие.
• prevent Default ( ) — предотвращает дефолтное поведение события. Если вызвать этот метод на событии клика по ссылке, то переход по ссылке не произойдёт, но событие продолжит всплытие.
• stop Propagation ( ) — предотвращает всплытие события.
• stop Immediate Propagation ( ) — делает то же самое, что и stop Propagation , но в том числе предотвращает вызов обработчиков события, которые были установлены на этом же элементе.

Обработчики событий, установленные на элемент, вызываются по порядку их установки.

Как понять

Скопировать ссылку «Как понять» Скопировано

Работа JavaScript основана на событийной модели — это значит, что для того, чтобы запустить какой-либо код, должно произойти событие. Даже код, который был написан в файле и не привязан к какому-либо событию, будет обработан после того, как произойдёт событие, которое сообщит браузеру, что код был загружен.

Событие может быть создано по следующим причинам:

• действие пользователя;
• системное событие;
• событие, созданное программно.

Примеры

Скопировать ссылку «Примеры» Скопировано

Системное событие

Скопировать ссылку «Системное событие» Скопировано

Системное событие инициируется DOM-окружением и является отражением какого-то события, произошедшего в операционной системе. Например, событие, что пользователь находится онлайн. То есть на наличие активного интернет-соединения.

Мы можем отслеживать состояние интернет-соединения и показывать сообщение, если оно пропало.

 window.addEventListener('offline', function()  alert('Отсутствует подключение к интернету')>) window.addEventListener('offline', function()  alert('Отсутствует подключение к интернету') >)    Скопировать Скопировано Не удалось скопировать   

Программное событие

Скопировать ссылку «Программное событие» Скопировано

Событие может быть создано с помощью кода, поле is Trusted в таком событии будет содержать значение false , а значит, мы будем знать, что событие было вызвано не системно и не пользователем.

Создадим своё событие и вызовем его на window :

 const myEvent = new CustomEvent('my-event',  detail:  spicy: 123, >,>) window.addEventListener('my-event', function(evt)  console.log('В поле spicy:', evt.detail.spicy)>) window.dispatchEvent(myEvent) const myEvent = new CustomEvent('my-event',  detail:  spicy: 123, >, >) window.addEventListener('my-event', function(evt)  console.log('В поле spicy:', evt.detail.spicy) >) window.dispatchEvent(myEvent)    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Павел Минеев советует

Скопировать ссылку «Павел Минеев советует» Скопировано

�� В событии есть два похожих поля: target и current Target . Их отличие легко увидеть на примере.

   Моя кнопочка  button class="button" type="button"> span>Моя кнопочкаspan> button>    Скопировать Скопировано Не удалось скопировать   

 document.querySelector('.button').addEventListener('click', function (event)  console.log('Событие инициировано на', event.target) console.log('Событие поймано на', event.currentTarget)>) document.querySelector('.button').addEventListener('click', function (event)  console.log('Событие инициировано на', event.target) console.log('Событие поймано на', event.currentTarget) >)    Скопировать Скопировано Не удалось скопировать   

current Target всегда будет элементом, к которому привязан обработчик, то есть элементом, на котором вызывался add Event Listener ( ) .

target — это элемент, на котором произошло событие. Оно может не совпадать с current Target , потому что большинство событий всплывают.

Event

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

Интерфейсы, основанные на Event

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

Конструктор

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

Свойства

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Методы

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

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

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

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

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

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

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

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

Спецификации

Specification
DOM Standard # interface-event

Совместимость браузеров

BCD tables only load in the browser

Смотрите также

• Типы событий: 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

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  • Product help
  • Report an issue

  Our communities

  Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Что такое слушатель событий?

  

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

  В чем заключается синтаксис функции слушателя событий?

  Функция слушателя событий обладает теми же характеристиками, что и другие функции JavaScript. При активации эта функция выполняет необходимые действия для обработки события. Например, благодаря функции слушателя событий можно изменять отображаемый текст, собирать информацию из регистрационных форм или хранить данные в базах данных.

  Синтаксис слушателя событий

  Функция слушателя событий соответствует правильному синтаксису JavaScript, как в следующем примере.

  document.getElementById(«textdisplay1»).innerHTML += «MouseClick happened» ;

  В этом примере показана функция слушателя событий RespondMouseClick. Обычно название функции пишется так, чтобы оно соответствовало назначению слушателя событий. В функции вы пишете коды для выполнения определенных действий при наступлении события. В этом примере функция добавляет текст MouseClick happened к HTML-элементу textdisplay1.

  Синтаксис обработчика событий

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

  if (event.type === «fullscreenchange»)

  console.log (“full screen toggle”);

  console.log (“full screen error”);

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

  Например, вы можете зарегистрировать слушатель событий для обработки всех типов событий блокчейна в приложениях, основанных на событиях. Дополнительные сведения см. в статье о создании приложения, основанного на событиях, с помощью Управляемого блокчейна Amazon.

  Как добавить слушатель событий?

  Слушатель событий будет активирован только после добавления его в соответствующий элемент JavaScript. Для этого вы можете использовать следующий синтаксис:

  • element.addEventListener(event, listener);
  • element.addEventListener(event, listener, useCapture);
  • element.addEventListener(event, listener, options);

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

  Можно также добавить несколько слушателей событий к определенному объекту события, не перезаписывая существующие обработчики событий.

  Например, Amazon Web Services (AWS) позволяет разработчикам объединять несколько обратных вызовов для объекта AWS.Request. Дополнительные сведения см. в статье о том, как использовать слушатель событий объекта запросов на AWS.

  Параметры добавления событий

  Ниже приведено объяснение параметров из предыдущего синтаксиса.

  • Параметр event – это любое допустимое событие JavaScript, такое как щелчок, изменение, наведение курсора мыши, нажатие клавиши и загрузка.
  • Параметр listener – это обратный вызов события или функция JavaScript, созданная для ответа на определенные события.
  • Параметр useCapture – это дополнительный параметр, указывающий режим распространения событий. Он принимает логические значения, где true активирует перехват, а false – всплытие. По умолчанию для этого параметра установлено значение false.
  • Параметр options состоит из нескольких дополнительных значений, включая сигналы режима перехвата и отклонения, которые отражают поведение слушателя.

  Как удалить слушатель событий?

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

  element.removeEventListener(type, listener, useCapture);

  Параметры удаления слушателя событий аналогичны параметрам, которые вы используете для его добавления. При удалении слушателя событий необходимо указать те же параметры типа, слушателя и useCapture. Если этого не сделать, слушатель событий будет оставаться активным и продолжать срабатывать для будущих событий.

  Например, вы можете добавить событие с помощью следующего кода.

  button.addEventListener(«click», RespondMouseClick, true);

  Однако при применении следующего кода не удается удалить слушателя событий. Это связано с тем, что значение useCapture отличается от значения, зарегистрированного в объекте кнопки.

  button.removeEventListener(«click», RespondMouseClick, false);

  Чтобы успешно удалить событие и предотвратить его запуск, вы можете использовать следующий код.

  button.removeEventListener(«click», RespondMouseClick, true);

  Как работают функции вложенного слушателя событий?

  Вложенные слушатели событий – это обработчики событий, добавленные к элементам HTML на разных иерархических уровнях.

  В следующем примере HTML документ является владельцем родительского элемента, а родительский элемент – дочернего.

  В сложных веб-приложениях может быть несколько родительских и дочерних слоев с соответствующими функциями слушателей событий. Когда происходит определенное событие, слушатели событий запускаются на разных уровнях в определенном порядке. Например, при нажатии на дочернюю кнопку событие будет распространяться на все обработчики, которые фиксируют нажатие мыши.

  События могут распространяться в двух режимах: всплытия и перехвата.

  Всплытие события

  Всплытие – это режим обработки событий JavaScript по умолчанию. Он распространяет событие от самого внутреннего слоя к самому внешнему.

  Например, пользователь может навести курсор на текстовое поле в дочернем разделе. Затем приложение может передать событие в следующем порядке:

  1. Слушатель событий в дочернем объекте обрабатывает событие наведения мыши.
  2. Затем родительский слушатель событий обрабатывает событие и передает управление слушателю событий документа.

  Чтобы настроить всплытие событий, используйте следующий синтаксис:

  • element.addEventListener(event, listener, [false]);
  • element.addEventListener(event, listener);

  Перехват событий

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

  Например, пользователь может нажать на дочернюю кнопку и запустить следующую последовательность действий:

  1. Событие щелчка мыши обрабатывает слушатель событий документа, а затем – родительский обработчик событий.
  2. Событие достигает целевого элемента – кнопки. Событие обрабатывает слушатель событий кнопки.
  3. Обработка событий переключается из режима записи в режим всплытия.
  4. То же событие щелчка мыши запускает обработчик события на родительском объекте, а затем переходит к документу.

  Как выбрать между всплытием и перехватом

  Всплытие и перехват позволяют по-разному управлять событиями. Режим всплытия используется редко, поскольку перехвата достаточно для обработки большинства событий в приложениях.

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

  Например, рассмотрим родительскую форму, состоящую из двух дочерних элементов. Первый элемент требует немедленного обновления при возникновении события во втором элементе. В этом случае вам следует использовать режим перехвата. Благодаря ему родительский слушатель событий обрабатывает событие и обновляет первый элемент. Затем он передает управление слушателю событий на втором дочернем элементе.

  Как остановить распространение событий в функциях вложенных слушателей событий?

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

  Следующий метод останавливает событие в слушателе событий.

  Например, если вы вызовете StopPropagation дочерней кнопкой, событие щелчка мыши не распространится на родительский уровень и уровень документа. Таким образом, слушатели мероприятий более высокого уровня не будут активированы.

  Остановить распространение всех событий

  StopPropagation останавливает распространение событий только текущего типа. Если в объекте зарегистрированы разные типы слушателей событий, они все равно срабатывают, несмотря на вызов команды StopPropagation.

  Чтобы остановить все события, связанные с определенным объектом, вы можете использовать метод StopImmediatePropagation следующим образом.

  Когда один слушатель событий вызывает StopImmediatePropagation, другие слушатели, связанные с объектом, не запускаются.

  Как AWS обеспечивает соответствие вашим требованиям к JavaScript?

  Amazon Web Services (AWS) предлагает SDK AWS для JavaScript, чтобы вы могли легко использовать сервисы в своих приложениях с помощью библиотек и API.

  SDK можно использовать для разработки серверных, веб- и мобильных веб-приложений. SDK поддерживает среды выполнения JavaScript, Node.JS и React Native, а также их сочетания. Благодаря этому разработчики могут запускать один и тот же пакет сервисов клиента на разных платформах.

  Ниже приведены другие преимущества использования SDK.

  • SDK написан на языке TypeScript. Таким образом обеспечиваются такие преимущества, как статическая проверка типов и поддержка классов и модулей.
  • В SDK есть стек промежуточного программного обеспечения, который позволяет вводить настраиваемые действия.
  • SDK обладает модульной архитектурой. Благодаря этому вы можете использовать только необходимые пакеты для оптимизации производительности приложения.

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

  Введение в события

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

  Предпосылки:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, Первые шаги в JavaScript.
  Задача:	Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования.

  Серия удачных событий

  При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.

  

  В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:

  • Пользователь кликает мышью или наводит курсор на определённый элемент.
  • Пользователь нажимает клавишу на клавиатуре.
  • Пользователь изменяет размер или закрывает окно браузера.
  • Завершение загрузки веб-страницы.
  • Отправка данных через формы.
  • Воспроизведение видео, пауза или завершение воспроизведения.
  • Произошла ошибка.

  Подробнее о событиях можно посмотреть в Справочнике по событиям.

  Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

  Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.

  Простой пример

  Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:

  button>Change colorbutton> 

  button  margin: 10px; > 

  JavaScript выглядит так:

  const btn = document.querySelector("button"); function random(number)  return Math.floor(Math.random() * (number + 1)); > btn.onclick = function ()  const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >; 

  В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const , используя функцию Document.querySelector() . Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента .

  Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент — всякий раз, когда пользователь щёлкает по нему.

  Пример вывода выглядит следующим образом:

  События не только для веб-страниц

  События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.

  Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации обработчиков событий, и функция once() для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

  Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре CamelCase (например, onMessage , а не onmessage ) и должны сочетаться с функцией addListener . См. runtime.onMessage page для примера.

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

  Способы использования веб-событий

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

  Свойства обработчика событий

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

  const btn = document.querySelector("button"); btn.onclick = function ()  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >; 

  В данной ситуации свойство onclick — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с btn.textContent или btn.style (en-US) ), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).

  Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье Создайте свою функцию):

  const btn = document.querySelector("button"); function bgChange()  const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; > btn.onclick = bgChange; 

  Давайте теперь поэкспериментируем с другими свойствами обработчика событий.

  Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

  • btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
  • btn.ondblclick (en-US) — Цвет будет изменяться только при двойном щелчке.
  • window.onkeypress , window.onkeydown , window.onkeyup (en-US) — Цвет будет меняться при нажатии клавиши на клавиатуре, причём keypress ссылается на обычное нажатие (нажатие кнопки и последующее её отпускание как одно целое), в то время как keydown и keyup разделяют действия на нажатие клавиши и отпускание, и ссылаются на них соответственно. Обратите внимание, что это не работает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке — его нужно зарегистрировать на объекте window, который представляет все окно браузера.
  • btn.onmouseover (en-US) и btn.onmouseout (en-US) — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.

  Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать onplay (en-US) только для определённых элементов, таких как ).

  Встроенные обработчики событий — не используйте их

  Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

  button onclick="bgChange()">Press mebutton> 

  function bgChange()  const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; > 

  Примечание: вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).

  Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

  button onclick="alert('Hello, this is my old-fashioned event handler!');"> Press me button> 

  Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.

  Более того, не рекомендуется смешивать HTML и JavaScript файлы, так как в дальнейшем такой код становится сложнее с точки зрения обработки (парсинга). Лучше держать весь JavaScript в одном месте. Также, если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.

  Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.

  const buttons = document.querySelectorAll("button"); for (var i = 0; i  buttons.length; i++)  buttons[i].onclick = bgChange; > 

  Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList , можно воспользоваться встроенным методом forEach() (en-US) :

  .forEach(function (button)  button.onclick = bgChange; >); 

  Примечание: Разделение логики вашей программы и вашего контента также делает ваш сайт более дружественным к поисковым системам.

  Функции addEventListener() и removeEventListener()

  Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener() . Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

  var btn = document.querySelector("button"); function bgChange()  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; > btn.addEventListener("click", bgChange); 

  Примечание: вы можете найти исходный код из этого примера на GitHub (также взгляните на его выполнение).

  Внутри функции addEventListener() мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции addEventListener() в анонимную функцию, например:

  .addEventListener("click", function ()  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >); 

  Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener() , которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:

  .removeEventListener("click", bgChange); 

  Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.

  Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:

  .onclick = functionA; myElement.onclick = functionB; 

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

  .addEventListener("click", functionA); myElement.addEventListener("click", functionB); 

  Обе функции будут выполняться при щелчке элемента.

  Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод EventTarget.addEventListener() и Метод EventTarget.removeEventListener().

  Какой механизм мне использовать?

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

  Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей

  • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
  • События уровня 2 DOM ( addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.

  Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener() , и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener(‘click’, function() <. >) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

  .onclick = function1; element.onclick = function2; etc. 

  Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, jQuery ) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.

  Другие концепции событий

  Рассмотрим некоторые современные концепции, имеющие отношение к событиям. На данный момент не обязательно понимать их полностью, но представление о них поможет лучше понять некоторые модели кода, с которыми вы, вероятно, столкнётесь.

  Объекты событий

  Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event , evt или просто e . Называется он объектом события и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

  function bgChange(e)  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; e.target.style.backgroundColor = rndCol; console.log(e); > btn.addEventListener("click", bgChange); 

  Примечание: вы можете найти исходник кода для этого примера на GitHub (также взгляните на его выполнение).

  Итак в коде выше мы включаем объект события e в функцию, а в функции — настройку стиля фона для e.target , который является кнопкой. Свойство объекта события target всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.

  Примечание: Вместо e / evt / event можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. e / evt / event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.

  e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target , вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов с использованием JavaScript. Затем мы выберем все из них, используя document.querySelectorAll() , и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

  var divs = document.querySelectorAll("div"); for (var i = 0; i  divs.length; i++)  divs[i].onclick = function (e)  e.target.style.backgroundColor = bgChange(); >; > 

  Результат выглядит следующим образом (попробуйте щёлкнуть по нему):

  doctype html> html> head> meta charset="utf-8" /> title>Useful event target exampletitle> style> div  background-color: #ff6600; height: 100px; width: 25%; float: left; > style> head> body> script> for (var i = 1; i  16; i++)  var myDiv = document.createElement("div"); document.body.appendChild(myDiv); > function random(number)  return Math.floor(Math.random() * number); > function bgChange()  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; return rndCol; > var divs = document.querySelectorAll("div"); for (var i = 0; i  divs.length; i++)  divs[i].onclick = function (e)  e.target.style.backgroundColor = bgChange(); >; > script> body> html> 

  Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. Event для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, Media Recorder API (en-US) имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события ondataavailable handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.

  Предотвращение поведения по умолчанию

  Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространённым примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).

  Но если пользователь отправил данные не правильно, как разработчик, вы хотите остановить отправку на сервер и выдать сообщение об ошибке с информацией о том, что не так и что нужно сделать. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.

  Простая форма HTML, в которой требуется ввести ваше имя и фамилию:

  form> div> label for="fname">Имя: label> input id="fname" type="text" /> div> div> label for="lname">Фамилия: label> input id="lname" type="text" /> div> div> input id="submit" type="submit" /> div> form> p>p> 

  div  margin-bottom: 10px; > 

  В JavaScript мы реализуем очень простую проверку внутри обработчика события onsubmit (событие «отправить» запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию preventDefault() объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:

  var form = document.querySelector("form"); var fname = document.getElementById("fname"); var lname = document.getElementById("lname"); var submit = document.getElementById("submit"); var para = document.querySelector("p"); form.onsubmit = function (e)  if (fname.value === "" || lname.value === "")  e.preventDefault(); para.textContent = "Оба поля должны быть заполнены!"; > >; 

  Очевидно, что это довольно слабая проверка формы — это не помешает пользователю отправить форму с пробелами или цифрами, введёнными в поля, но для примера подходит. Вывод выглядит следующим образом:

  Примечание: чтобы увидеть исходный код, откройте preventdefault-validation.html (также запустите здесь).

  Всплытие и перехват событий

  Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример show-video-box.html в одной вкладке и исходный код в другой вкладке. Он также представлен ниже:

  doctype html> html> head> meta charset="utf-8" /> title>Show video box exampletitle> style> div  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 550px; height: 420px; border-radius: 10px; background-color: #eee; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4) ); > .hidden  left: -50%; > .showing  left: 50%; > div video  display: block; width: 400px; margin: 50px auto; > style> head> body> button>Display videobutton> div class="hidden"> video> source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4" /> source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm" /> p> Your browser doesn't support HTML5 video. Here is a a href="rabbit320.mp4">link to the videoa> instead. p> video> div> script> var btn = document.querySelector("button"); var videoBox = document.querySelector("div"); var video = document.querySelector("video"); btn.onclick = function ()  displayVideo(); >; function displayVideo()  if (videoBox.getAttribute("class") === "hidden")  videoBox.setAttribute("class", "showing"); > > videoBox.addEventListener("click", function ()  videoBox.setAttribute("class", "hidden"); >); video.addEventListener("click", function ()  video.play(); >); script> body> html> 

  Это довольно простой пример, который показывает и скрывает с элементом внутри него:

  button>Display videobutton> div class="hidden"> video> source src="rabbit320.mp4" type="video/mp4" /> source src="rabbit320.webm" type="video/webm" /> p> Your browser doesn't support HTML5 video. Here is a a href="rabbit320.mp4">link to the videoa> instead. p> video> div> 

  div  position: absolute; top: 50%; transform: translate(-50%,-50%); . > .hidden  left: -50%; > .showing  left: 50%; > 

  var btn = document.querySelector("button"); btn.onclick = function ()  videoBox.setAttribute("class", "showing"); >; 

  Затем мы добавляем ещё пару обработчиков событий onclick. Первый к , а второй к . Идея заключается в том, чтобы при щелчке по области вне зоны видео поле снова скрылось, а при клике в области видео начало воспроизводиться.

  var videoBox = document.querySelector("div"); var video = document.querySelector("video"); videoBox.onclick = function ()  videoBox.setAttribute("class", "hidden"); >; video.onclick = function ()  video.play(); >; 

  Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие . Это связано с тем, что видео находится внутри , это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.

  Всплытие и перехват событий — концепция выполнения

  На стадии захвата происходит следующее:

  • Браузер проверяет, имеет ли самый внешний элемент ( ) обработчик события onclick , зарегистрированный на нем на этапе захвата и запускает его, если это так.
  • Затем он переходит к следующему элементу внутри и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента, на который на самом деле нажали.

  На стадии всплытия происходит полная противоположность:

  • Браузер проверяет, имеет ли элемент, который был фактически нажат, обработчик события onclick , зарегистрированный на нем в фазе всплытия, и запускает его, если это так.
  • Затем он переходит к следующему непосредственному родительскому элементу и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента .

  

  (Нажмите на изображение, чтобы увеличить диаграмму)

  В современных браузерах по умолчанию все обработчики событий регистрируются в фазе всплытия. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента наружу, в элемент . По пути:

  • Он находит обработчик video.onclick. и запускает его, поэтому видео сначала начинает воспроизводиться.
  • Затем он находит обработчик videoBox.onclick. и запускает его, поэтому видео также скрывается.

  Исправление проблемы с помощью stopPropagation()

  Чтобы исправить это раздражающее поведение, стандартный объект события имеет функцию, называемую stopPropagation() , которая при вызове в обработчике событий объекта делает так, чтобы обработчик выполнялся, но событие не всплывало дальше по цепочке, поэтому не будут запускаться другие обработчики.

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

  .onclick = function (e)  e.stopPropagation(); video.play(); >; 

  Вы можете попробовать создать локальную копию show-video-box.html и попробовать его самостоятельно исправить или просмотреть исправленный результат в show-video-box-fixed.html (также см. исходный код здесь).

  Примечание: Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.

  Примечание: Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе всплытия и это имеет смысл в большинстве случаев. Если вы действительно хотите зарегистрировать событие в фазе захвата, вы можете сделать это, зарегистрировав обработчик с помощью addEventListener() и установив для третьего дополнительного свойства значение true .

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

  Всплытие также позволяет нам использовать делегирование событий. Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определённый код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.

  и он будет всплывать в элементах списка.

  Эту концепцию объясняет в своём блоге Дэвид Уолш, где приводит несколько примеров. (см. How JavaScript Event Delegation Works.)

  Вывод

  Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (Web API).

  Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.

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

  Смотрите также

  • Event order (обсуждение захвата и всплытий) — превосходно детализированная часть от Peter-Paul Koch.
  • Event accessing (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.
  • Event reference
  • Назад
  • Обзор: Building blocks
  • Далее

  В этом модуле

  • Принятие решений в вашем коде — условные конструкции
  • Зацикливание кода
  • Функции — Переиспользуемые блоки кода
  • Создайте свою собственную функцию
  • Возвращаемое значение функции
  • Введение в события
  • Создание галереи

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  Похожие публикации:

  1. Как обновить виндовс 7 до sp2
  2. Как поставить букву над стрелкой в латехе
  3. Как установить curl linux
  4. Микрофон определяется как наушники андроид