JavaScript - Funções de seta e manipuladores de eventos

Ao usar funções de seta como retornos de chamada para manipuladores de eventos, o valor this dentro da função é inesperado. Esta postagem do blog explica o motivo por trás desse comportamento e fornece uma solução para acessar o elemento pretendido usando event.currentTarget.

Funções de seta e escopo léxico

Ao contrário das funções regulares, as funções de seta não têm seus próprio contexto ou escopo para isso. Em vez disso, eles herdam o escopo lexical do contexto circundante. No exemplo fornecido, a função de seta é definida no manipulador de eventos click de dom.videoLinks. Portanto, isso dentro da função de seta refere-se ao elemento dom.videoLinks.

Event Listeners e event.currentTarget

Event listeners são anexados a elementos específicos e são executados quando determinados eventos ocorrem. Quando um evento é acionado, o objeto de evento contém informações sobre o elemento de destino que acionou o evento e o elemento de destino atual que possui o ouvinte de evento anexado a ele.

A propriedade event.target refere-se ao elemento que diretamente desencadeou o evento. Na maioria dos casos, este é o elemento que foi clicado, passado o mouse ou recebeu foco.

A propriedade event.currentTarget, por outro lado, refere-se ao elemento que possui o ouvinte de evento anexado a ele. Este é o elemento no qual o evento está sendo processado no momento da execução.

Usando event.currentTarget em Arrow Functions

Para acessar o elemento pretendido em um manipulador de eventos de função de seta, use event .currentTarget em vez disso. Aqui está uma versão modificada do código:

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

Em geral, event.currentTarget deve ser usado em vez de event.target ao trabalhar com manipuladores de eventos. Isso ocorre porque os eventos podem aparecer ou capturar a árvore DOM, e o uso de event.target nem sempre pode se referir ao elemento que você pretende atingir.

event.currentTarget refere-se consistentemente ao elemento que possui o ouvinte de evento anexado a ele, independentemente do fluxo de eventos.

Conclusão

Ao usar funções de seta em manipuladores de eventos, lembre-se de usar event.currentTarget para acessar o elemento pretendido. Tenha em mente a distinção entre event.target e event.currentTarget ao trabalhar com borbulhamento e captura de eventos para garantir o tratamento preciso dos eventos.