Визуальный объект может состоять из нескольких узлов
Представим контейнер панели, внутри которого находится кнопка, а внутри кнопки — элемент со значком. Для пользователя это единое управление, но у каждого элемента есть своё место в дереве DOM. Родительская связь важна для поиска элементов, изменения структуры и обработки событий. Поэтому анализ начинают не только с картинки страницы, но и с вложенности. Если обработчик ожидает, что исходная цель всегда является кнопкой, клик по внутреннему значку может нарушить это предположение. Внешняя похожесть двух кликов не гарантирует одинакового значения target.
Цель события и текущий обработчик различаются
Свойство target указывает на объект, на который было направлено событие. В нашем примере при клике по значку это элемент значка. Свойство currentTarget во время выполнения обработчика показывает объект, на котором этот обработчик зарегистрирован. Если слушатель установлен на кнопке, currentTarget будет кнопкой. При всплытии click событие может дойти до родительского контейнера. В его обработчике currentTarget станет контейнером, а target в заданной простой модели останется значком. Это два разных ответа: где началось событие и чей обработчик выполняется сейчас.
Делегирование использует связь с предками
Иногда один обработчик размещают на общем контейнере и определяют нужное действие по элементу, от которого пришло событие. Такой подход называют делегированием. При вложенном значке полезно искать соответствующую кнопку среди его предков и проверять, что она относится к нужному контейнеру. Нельзя без проверки считать любой клик внутри панели командой кнопки: пользователь может нажать на свободное место. Также не все виды событий ведут себя одинаково, поэтому правило всплытия конкретного click не следует переносить на любые события. Корректная модель связывает структуру, тип события и зарегистрированные обработчики.
Попробуйте на практике
Проследите событие на бумажном дереве DOM. Писать программу и открывать настоящий сайт не требуется.
- Нарисуйте три вложенных элемента: панель, кнопку и значок внутри кнопки. Отметьте обработчики click на кнопке и панели.
- Задайте клик по значку. Запишите значение target и currentTarget во время выполнения обработчика кнопки.
- Проследите всплытие до панели. Запишите те же два свойства во время выполнения её обработчика.
- Теперь задайте клик по свободной области самой панели. Сравните цель события с предыдущим случаем и объясните, почему действие кнопки запускать не следует.
- Добавьте рядом вторую кнопку с собственным значком. Опишите, как обработчик панели должен различить две команды по принадлежности элемента, не опираясь на совпадение текста.
Как проверить результат. При клике по значку target указывает на значок; currentTarget последовательно соответствует кнопке и панели в их обработчиках. При клике по свободной панели цель — сама панель, и команда кнопки не выводится из этого события.
Частые вопросы
currentTarget всегда можно прочитать позже из сохранённого события?
Нет. Его значение связано с выполнением обработчика; вне обработки оно может быть null. Если нужная информация требуется позднее, важно понимать момент её получения и сохранять необходимые данные осознанно.
Нужно ли ставить обработчик на каждый вложенный значок?
Не обязательно. Часто достаточно обработчика кнопки или продуманного делегирования на контейнере. Выбор зависит от структуры и задачи. Важно корректно различать исходную цель и элемент, представляющий действие.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.