JavaScript свойство Event.target
Определение и применение
JavaScript свойство target объекта Event ссылается на объект, который отправил событие. Свойство доступно только для чтения.
Свойство currentTarget объекта Event в отличие от target всегда ссылается на элемент, к которому был присоединен обработчик события, а не на элемент, в котором произошло событие.
Это свойство может быть полезным при делегированых событиях, когда событие находится в фазе всплытия для определения элемента, который инициировал событие. Свойство target может быть как элементом, на котором установлен обработчик события, так и его потомком.
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| target | Да | Да | Да | Да | Да | Да |
JavaScript синтаксис:
Версия JavaScript
Пример использования
В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент
При возникновении этого события срабатывает функция, которая выводит в консоль значение свойства currentTarget, которое соответствует текущему элементу DOM, в котором в настоящий момент обрабатывается событие и свойства target, которое ссылается на объект, который отправил событие.
Обратите внимание, что значения свойств будут отличаться, currentTarget всегда будет содержать элемент
Результат нашего примера:
Пример использования JavaScript свойства target и currentTarget объекта Event JavaScript Event
Простое объяснение делегирования событий в JavaScript
Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin
В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.
1. Почему делегирование событий?
Давайте напишем скрипт, который при нажатии на HTML-кнопку, будет отправлять сообщение в консоль.
Чтобы срабатывало такое поведение, необходимо в JavaScript найти эту кнопку и с помощью метода addEventListener() прикрепить к ней обработчик события.
Данный способ позволяет начать отслеживать события на одном элементе. Например, на кнопке.
А что, если возникает необходимость отслеживать события на множестве кнопок? Вот пример одного из способов реализаций:
Посмотреть, как работает данный способ, можно в демонстрации CodeSandbox
Сначала делается выборка всех необходимых кнопок страницы, затем с помощью цикла for (const button of buttons) производится обход всех элементов этого списка, в котором к каждой кнопке прикрепляется обработчик события. Также, когда во время работы с документом на странице появляются новые кнопки, возникает необходимость вручную прикреплять обработчики событий для этих новых элементов.
Существует ли лучший способ?
К счастью, при использовании шаблона «делегирование событий», отслеживание событий на множестве элементов требует наличия только одного обработчика.
Делегирование событий использует особенности работы «распространения событий». Чтобы понять, как работает делегирование, предлагаю сначала разобраться в принципе работы их распространения.
2. Распространение событий
Когда вы нажимаете на кнопку в следующей HTML-разметке:
Событие клика распространяется в 3 этапа:
Третий аргумент captureOrOptions метода addEventListener :
позволяет вам перехватывать события на разных этапах их распространения.
В следующем примере обработчик перехватывает событие клика на элементе на «Фазе захвата»:
В демонстрации CodeSandbox, при нажатии на кнопку, в консоли можно увидеть, как распространяется событие.
Итак, как распространение события помогает перехватывать события из множества кнопок?
Принцип прост: обработчик события прикрепляется к элементу, являющемуся для кнопок родительским, и при нажатии на кнопку отлавливает всплывающее событие. Именно так работает делегирование событий.
3. Делегирование событий
Давайте воспользуемся делегированием, чтобы отловить клики на несколько кнопок:
Откройте демонстрационный код и кликните на любую кнопку – вы увидите в консоли сообщение «Click!».
Идея делегирования событий роста. Вместо прикрепления обработчиков событий прямо к кнопкам, мы делегируем отслеживание этого события родительскому элементу
Использование делегирования событий требует 3 шагов:
Шаг 1. Определить общего родителя элементов для отслеживания событий
В примере ниже
Шаг 2. Прикрепить к родительскому элементу обработчик событий
document.getElementById(‘buttons’).addEventListener(‘click’, handler) прикрепляет обработчик событий к родителю кнопок. Этот обработчик также реагирует на нажатия на кнопки, так как события нажатий на кнопки всплывают по всем элементам-предкам (благодаря распространению событий).
Теперь вы можете увидеть преимущества шаблона делегирования событий: вместо прикрепления обработчиков к каждой кнопке, как это было сделано раньше, благодаря делегированию событий, остаётся потребность только в одном обработчике.
4. Резюме
Когда происходит событие нажатия на кнопку (или любое другое распространяющееся событие):
Механизм называется распространением события.
Делегирование событий является полезным шаблоном, так как позволяет отслеживать события на множестве элементов с помощью только одного обработчика.
Для работы делегирования событий нужно 3 шага:
Свойства и методы объекта события в JavaScript
Как получить информацию о событии?
Получить детальную информацию о событии в обработчике можно посредством объекта события ( Event ). Данный объект создаёт браузер, когда это событие происходит. В него он помещает много различной информации. Например, для события click : какая клавиша нажата, координаты курсора и др.
Объект события в соответствии со стандартом всегда передаётся обработчику посредством первого аргумента:
Например, выведем детальную информацию в консоль при клике на элемент:
Свойства и методы объекта события
Свойства объекта Event :
Методы объекта Event :
Свойства объекта события MouseEvent
Например, получим координаты курсора при перемещении по документу (событие mousemove ):
Так как в разметке элементы вложены друг в друга, то курсор в большинстве случаев всегда находится одновременно над несколькими элементами. Но взаимодействие всегда осуществляется с тем, кто расположен глубже других (т.е. ближе к нам по оси Z). Если элементы находятся не в основном потоке, то в этом случае с тем, у кого больше значение свойства z-index. Но если элементы имеют одинаковое значение z-index, то тогда ближе к нам будет уже тот, кто из них глубже расположен.
Например, при движении мыши будем выводить информацию о элементе (его значение id ), который в данный момент создаёт событие mousemove :
Свойства объекта события KeyboardEvent
Объект KeyboardEvent позволяет обрабатывать взаимодействия пользователя с клавиатурой:
Отличие target от currentTarget
События в браузере по умолчанию всплывают. Из-за этого:
Например, рассмотрим этот код:
Использование target и relatedTarget
Свойство relatedTarget предназначено для определения дополнительной цели, связанной с событием.
Задачи
1. Удаление элемента при клике на нем
Необходимо написать JavaScript сценарий, который будет при клике на элементе удалять его из DOM.
2. Перемещение блока с помощью клавиш «WASD»
Нужно создать код, который будет при нажатии клавиш «WASD» перемещать элемент #box по странице.
3. Одновременное нажатие кнопок
Напишете код, который будет при одновременном нажатии клавиш Z и X показывать в верхней части экрана сообщение.
Создаваемое сообщение должно иметь следующую разметку:
Делегирование событий в JavaScript
Очень доходчивая статья о том, как работает делегирование событий в JavaScript и как не запутаться в слушателях событий.
Чтобы понять делегирование событий в JavaScript, вам сначала надо понять работу слушателей самих событий (ну или event listeners).
Я не очень люблю описывать вещи словами из их названия, но тут уж некуда деваться, слушатели событий следят за срабатыванием самих событий на странице. Вот, собственно и всё.
Событием в JavaScript можно назвать то, что “происходит с HTML элементом”, а происходить с ним может много чего.
Вот некоторые популярные JavaScript события:
change — срабатывает тогда, когда что-то поменялось в HTML элементе.
click — когда пользователь кликает на элемент.
mouseover — когда пользователь наводит мышь на HTML элемент.
mouseout — когда пользователь отводит мышку от элемента.
keydown — когда пользователь кликает на клавиатуру.
load — когда браузер заканчивает загрузку страницы.
Чтобы добавить слушатель событий к HTML элементу, вы можете использовать addEventListner() метод.
Первая часть кода это то, что мы будем слушать, в нашем случае это просто HTML элемент. Но в JavaScript можно слушать просто неописуемое изобилие вещей на странице и не только. Это может быть HTML элемент на странице, это может быть сам документ или это может быть окно браузера. В общем, это объект высшего порядка в client-side JavaScript который охватывает почти всё. Но всё же, в большинстве случаев это HTML элементы. Вторая часть кода это уже сам слушатель.
Вот как работает eventListener :
Слушатели событий выставляются после загрузки страницы. Так что, когда вы впервые открываете сайт, браузер скачивает, считывает и выполняет JavaScript.
В коде выше, при загрузке страницы, слушатель событий находит HTML элемент с id disnay-character и выставляет на него слушатель события по клику.
Вся эта конструкция будет успешно работать, если элемент уже существует на странице. Но что происходит со слушателем событий, когда элемент добавляется в DOM уже после загрузки страницы?
Делегирование событий
Именно оно решает эту проблему. Чтобы понять принцип его работы, нам надо посмотреть ниже на список персонажей Disney.
У этого списка есть довольно простой функционал. Именно для наших нужд мы можем добавить несколько персонажей в этот список и проверить боксы рядом с именем персонажа.
Этот список также является динамическим. Инпуты (Mickey, Minnie, Goofy) были добавлены уже ПОСЛЕ загрузки страницы и следовательно, на них не были прикреплены слушатели событий.
Давайте посмотрим на этот код:
Но давайте посмотрим на HTML при загрузке страницы:
А теперь давайте взглянем на HTML после загрузки страницы (из локального веб-хранилища, API запроса и т.п.):
Если вы захотите кликнуть на инпуты персонажей — Mickey, Minnie, or Goody), то вы наверное ожидали бы увидеть всплывающее окно с надписью “hi!”, но так как они не были загружены на страницу при её инициализации, то и прослушиватели событий НЕ БЫЛИ добавлены на эти элементы и само собой ничего не произойдёт.
Как же пофиксить эту проблему?
Суть делегирования событий в том, что вместо прослушивания изменений на инпутах напрямую, нам нужно прослушивать HTML элемент, который был бы на странице при изначальной загрузке.
Лучше рассматривать делегирование событий, как ответственных родителей и нерадивых детишек. В этом случае родители это просто боги, а детям приходиться слушать всё, что говорят их родители. Прекрасный аспект тут в том, что если бы мы добавили больше детей (или инпутов), то родители бы остались такими же в правах — они были с самого начала или другими словами, прямо с загрузки страницы.
Давайте прикрепим слушатель событий:
event.target это отсылка к объекту, на котом сработало событие. Или другими словами, он указывает на HTML элемент на котором сработало событие.
** label рассматривается, как часть объекта input — поэтому мы видимо их обоих**
Console.log(event.currentTarget)
Если мы выведем в консоль event.currentTarget — то увидим мы кое что другое.
Пишем делегирование событий в JavaScript
Так как теперь мы знаем, что event.target указывает на элементы на которых отработало событие и также мы знаем, какой элемент нам нужно слушать, решение проблемы с делегированием для нас не является проблемой.
В общем, код выше говорит нам то, что если элемент на котором отработал клик не является инпутом, то мы выходим из функции.
А если этот элемент является инпутом, то тогда мы выводим в консоль event.target и выполняем последующий JavaScript код на этом узле потомке.
Очень важно, что теперь мы можем быть уверены в том, что пользователь кликнул нужный узел потомок, пусть даже инпуты не были добавлены в DOM после начальной загрузки страницы.
Event Bubbling (Всплытие событий)
Если вы хотите завершить чтение на этом моменте — то смело это делайте. Мы уже узнали основы делегирования событий. Но для глубокого понимания того, почему оно работает, нам нужно понять Event Bubbling.
Что происходит на самом деле при клике?
Всякий раз, когда пользователь кликает, этот самый клик отдаётся вверх на самую высь DOM и отрабатывает событие клика на всех элементах родителя по которому был сделан клик. Вы не всегда видите эти клики, так как вы не всегда слушаете (с eventListener ) клики на этих элементах, но как бы то ни было, но такое “всплытие” действий имеет место быть.
Это называется Event Bubbling (Всплытие событий) или распространением события.
Это означает то, что всякий раз, когда вы кликаете на один из наших инпутов в DOM, вы по сути прокликиваете весь документ.
Выше мы видим то, что мы бы увидели в браузере. Обратите внимание на то, как мышка кликает по третьему div ’у. Как и ожидалось, когда я кликаю по нему, я вижу его класс в консоле. Но кликая по div #3, я также кликаю и по div #2 и div#1, который вывелись в консоль. Это и называется всплытием событий. Мы видим каждый класс, потому что мы добавили прослушиватель событий каждому родительскому div ’у.
Но вернемся к нашему примеру с делегированием события:
В завершение. А зачем использовать делегирование событий?
Email подписка!
Продвинутая работа с объектом Event на JavaScript
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Сейчас мы с вами разберем некоторые продвинутые вещи при работе с объектом Event, а именно: всплытие и перехват, а также делегирование событий.
Всплытие событий
Представьте себе, что у вас есть несколько вложенных друг в друга блоков:
Когда вы кликаете на самый внутренний блок, событие onclick возникает сначала в нем, а затем срабатывает в его родителе, в родителе его родителя и так далее, пока не дойдет то тега body и далее до тега html (затем до document и до window).
И это логично, ведь кликая на внутренний блок, вы одновременно кликаете на все внешние.
Давайте убедимся в этом на следующем примере: у нас есть 3 блока, к каждому из них привязано событие onclick:
event.target
Пусть у нас есть два элемента: div и абзац p, лежащий внутри этого дива. Пусть onlick мы привязали в диву:
Когда мы кликаем на этот див, мы можем попасть по абзацу, а можем попасть в место, где этого абзаца нет.
Давайте привяжем событие onclick самому верхнему элементу (диву) и будем кликать на разные элементы: на div, на p, на span. С помощью event.target получим самый нижний элемент, в котором случилось событие и выведем его название с помощью tagName.
Прекращение всплытия
Итак, вы уже знаете, что все события всплывают до самого верха (до тега html, а затем до document, а затем до window). Иногда есть нужда это всплытие остановить. Это может сделать любой элемент, через который всплывает событие. Для этого в коде элемента следует вызвать метод event.stopPropagation().
Погружение
Кроме всплытия событий есть еще и погружение (по научному стадия перехвата). Это значит, что событие сначала идет сверху вниз (стадия перехвата), доходит до нашего элемента (стадия цели) и только потом начинает всплывать (стадия всплытия).
Вступление к делегированию
Представим себе ситуацию: пусть у нас есть ul с несколькими li. К каждой li привязано следующее событие: по нажатию на li ей в конец добавляется ‘!’.
Давайте реализуем описанное:
Пусть теперь у нас также есть кнопочка, по нажатию на которую в конец ul добавляется новая li с текстом ‘пункт’. Нас ждет сюрприз: привязанное событие не будет работать для новых li! Убедимся в этом:
Делегирование событий
При этом работоспособность нашего скрипта должна сохраниться: по-прежнему при клике на li ей в конец будет добавляться ‘!’. Только событие в новом варианте будет навешано на ul:
Итак, вот решение нашей задачи через делегирование:
Результат выполнения кода:
При этом наше решение будет работать автоматически даже для новых li, ведь событие навешено не на li, а на ul:
Наш код рабочий, однако не без недостатков. Давайте разберем эти недостатки и напишем более универсальное решение.
Универсальное делегирование событий
Недостаток нашего кода проявится в том случае, когда внутри li будут какие-то вложенные теги. В нашем случае пусть это будут теги i:
Проблема исправляется следующим образом (описанный способ не единственный, но самый простой): с помощью метода closest найдем ближайшую li, котоорая является родителем для event.target вот так: event.target.closest(‘li’).
Если же клик был на самой li, то и в event.target, и в event.target.closest(‘li’) будет лежать наша li.
Результат выполнения кода:
Дополнительные материалы
Рекомендую посмотреть тренинг по делегированию событий.
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
