Объект события
Читайте сведения о событии, например target и type.
«Объект события» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Аргумент события
Когда происходит событие, браузер передаёт Вашему обработчику объект события. Он содержит сведения о произошедшем и об участвующих элементах.
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.type — это имя события, благодаря чему один обработчик может по-разному реагировать на разные типы событий.
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.target — это элемент, в котором событие фактически возникло, то есть самый глубокий элемент, с которым взаимодействовали.
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTarget — это элемент, чей обработчик сейчас выполняется, то есть элемент, для которого был вызван addEventListener.
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target и currentTarget
Когда события всплывают, target может быть дочерним элементом, а currentTarget — родителем, который прослушивает событие. Это различие лежит в основе делегирования событий.
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});Делегирование событий
Назначьте один обработчик родителю и используйте target.closest, чтобы определить, с каким дочерним элементом взаимодействовали. Такой подход лучше масштабируется, чем множество обработчиков.
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStamp фиксирует момент создания события и полезен для измерения промежутков между событиями.
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});Координаты в событиях мыши
События мыши содержат позиционные данные, например clientX/clientY (относительно области просмотра) и pageX/pageY (относительно документа).
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});Клавиши-модификаторы
Такие свойства, как e.shiftKey, e.ctrlKey, e.altKey и e.metaKey, сообщают, какие клавиши-модификаторы были зажаты.
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrusted имеет значение true для событий, созданных реальным пользователем, и false для событий, созданных скриптом, что помогает отличать настоящий пользовательский ввод.
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});Определение нажатой клавиши
События клавиатуры предоставляют e.key (символ или название клавиши), поэтому можно реагировать на определённые клавиши.
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});Быстрая проверка
Различите эти две цели.
Итоги
Объект события описывает событие: type, target (где оно возникло) и currentTarget (где находится обработчик). Различие между ними позволяет использовать делегирование событий. События также предоставляют координаты, клавиши-модификаторы, key, timeStamp и isTrusted.
Часто задаваемые вопросы
Урок «Объект события» бесплатный?
Да — полный текст урока «Объект события» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Объект события»?
Читайте сведения о событии, например target и type. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Объект события»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.