Объект события
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/introduction-browser-events.
Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.
Свойства объекта события
Пример ниже демонстрирует использование объекта события:
Свойства объекта event :
event.type Тип события, в данном случае click event.currentTarget Элемент, на котором сработал обработчик. Значение – в точности такое же, как и у this , но бывают ситуации, когда обработчик является методом объекта и его this при помощи bind привязан к этому объекту, тогда мы можем использовать event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика (относительно окна)
Есть также и ряд других свойств, в зависимости от событий, которые мы разберём в дальнейших главах, когда будем подробно знакомиться с событиями мыши, клавиатуры и так далее.
Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать переменную event , это будет работать кросс-браузерно:
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» .
Особенности IE8-
IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event . Обработчик может обратиться к нему.
Работает это так:
elem.onclick = function() < // window.event - объект события alert( window.event.clientX ); >;Кроссбраузерное решение
Универсальное решение для получения объекта события:
element.onclick = function(event) < event = event || window.event; // (*) // Теперь event - объект события во всех браузерах. >;Строка (*) , в случае, если функция не получила event (IE8-), использует window.event .-событие event .
Можно написать и иначе, если мы сами не используем переменную event в замыкании:
element.onclick = function(e) < e = e || event; // Теперь e - объект события во всех браузерах. >;Итого
- Объект события содержит ценную информацию о деталях события.
- Он передаётся первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event .
Кросс-браузерно для JavaScript-обработчика получаем объект события так:
element.onclick = function(event) < event = event || window.event; // Теперь event - объект события во всех браузерах. >;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 6 янв. 2024 г. 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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.Объект события 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 , потому что большинство событий всплывают.
Введение в браузерные события
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Вот список самых часто используемых DOM-событий, пока просто для ознакомления:
События мыши:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму .
- focus – пользователь фокусируется на элементе, например нажимает на .
Клавиатурные события:
- keydown и keyup – когда пользователь нажимает / отпускает клавишу.
События документа:
- DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
- transitionend – когда CSS-анимация завершена.
Существует множество других событий. Мы подробно разберём их в последующих главах.
Обработчики событий
Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.
Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.
Использование атрибута HTML
Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .
Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:
При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .
Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.
Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.
Следующий пример по клику запускает функцию countRabbits() :
Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .
Использование свойства DOM-объекта
Можно назначать обработчик, используя свойство DOM-элемента on .
К примеру, elem.onclick :
Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.
Этот способ, по сути, аналогичен предыдущему.
Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.
Эти два примера кода работают одинаково:
Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.
В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
Кстати, обработчиком можно назначить и уже существующую функцию:
function sayThanks() < alert('Спасибо!'); >elem.onclick = sayThanks;Убрать обработчик можно назначением elem.onclick = null .
Доступ к элементу через this
Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.
В коде ниже button выводит своё содержимое, используя this.innerHTML :
Частые ошибки
Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.
Функция должна быть присвоена как sayThanks , а не sayThanks() .
// правильно button.onclick = sayThanks; // неправильно button.onclick = sayThanks();Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.
…А вот в разметке, в отличие от свойства, скобки нужны:
Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .
Так что разметка генерирует такое свойство:
button.onclick = function() < sayThanks(); // содержимое атрибута >;Используйте именно функции, а не строки.
Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.
Не используйте setAttribute для обработчиков.
Такой вызов работать не будет:
// при нажатии на body будут ошибки, // атрибуты всегда строки, и функция станет строкой document.body.setAttribute('onclick', function() < alert(1) >);Регистр DOM-свойства имеет значение.
Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.
addEventListener
Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие.
Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.
Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:
input.onclick = function() < alert(1); >// . input.onclick = function() < alert(2); >// заменит предыдущий обработчикРазработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.
Синтаксис добавления обработчика:
element.addEventListener(event, handler, [options]);- once : если true , тогда обработчик будет автоматически удалён после выполнения.
- capture : фаза, на которой должен сработать обработчик, подробнее об этом будет рассказано в главе Всплытие и погружение. Так исторически сложилось, что options может быть false/true , это то же самое, что .
- passive : если true , то указывает, что обработчик никогда не вызовет preventDefault() , подробнее об этом будет рассказано в главе Действия браузера по умолчанию.
Для удаления обработчика следует использовать removeEventListener :
element.removeEventListener(event, handler, [options]);Удаление требует именно ту же функцию
Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
Вот так не сработает:
elem.addEventListener( "click" , () => alert('Спасибо!')); // . elem.removeEventListener( "click", () => alert('Спасибо!'));Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.
Вот так правильно:
function handler() < alert( 'Спасибо!' ); >input.addEventListener("click", handler); // . input.removeEventListener("click", handler);Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener .
Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.
Обработчики некоторых событий можно назначать только через addEventListener
Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .
Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.
document.onDOMContentLoaded = function() < alert("DOM построен"); // не будет работать >;document.addEventListener("DOMContentLoaded", function() < alert("DOM построен"); // а вот так сработает >);Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.
Объект события
Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.
Пример ниже демонстрирует получение координат мыши из объекта события:
Некоторые свойства объекта event :
event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.
Есть также и ряд других свойств, в зависимости от типа событий, которые мы разберём в дальнейших главах.
Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать объект event , вот так:
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.
Объект-обработчик: handleEvent
Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .
Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.
Мы также можем использовать класс для этого:
Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.
Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
Итого
Есть три способа назначения обработчиков событий:
- Атрибут HTML: onclick=». » .
- DOM-свойство: elem.onclick = function .
- Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.
HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.
DOM-свойства вполне можно использовать, но мы не можем назначить больше одного обработчика на один тип события. Во многих случаях с этим ограничением можно мириться.
Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, например, DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .
Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.
Мы изучим больше о событиях и их типах в следующих главах.