JavaScript — стрелочные функции и обработчики событий

При использовании стрелочных функций в качестве обратных вызовов для обработчиков событий значение this внутри функции является неожиданным. В этом сообщении блога объясняется причина такого поведения и предлагается решение для доступа к нужному элементу с помощью event.currentTarget.

Стрелочные функции и лексическая область действия

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

Прослушиватели событий и event.currentTarget

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

Свойство event.target ссылается на элемент, который непосредственно спровоцировало событие. В большинстве случаев это элемент, на который щелкнули, навел курсор или получил фокус.

Свойство event.currentTarget, с другой стороны, ссылается на элемент, к которому прикреплен прослушиватель событий. Это элемент, над которым событие обрабатывается во время выполнения.

Использование event.currentTarget в стрелочных функциях

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

dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log($(e.currentTarget));
  var self = $(e.currentTarget),
      url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});

.currentTarget vs .target

В общем, event.currentTarget следует использовать вместо event.target при работе с обработчиками событий. Это связано с тем, что события могут всплывать вверх или захватывать дерево DOM, а использование event.target не всегда может относиться к элементу, на который вы собираетесь нацелиться.

event.currentTarget последовательно ссылается на элемент, у которого есть прослушиватель событий. прикрепленный к нему, независимо от потока событий.

Заключение

При использовании стрелочных функций в обработчиках событий не забудьте использовать event.currentTarget для доступа к намеченному элементу. Помните о различии между event.target и event.currentTarget при работе с всплыванием и захватом событий, чтобы обеспечить точную обработку событий.