JavaScript: funciones de flecha y controladores de eventos

Cuando se utilizan funciones de flecha como devoluciones de llamada para controladores de eventos, el valor de this dentro de la función es inesperado. Esta publicación de blog explica el motivo detrás de este comportamiento y proporciona una solución para acceder al elemento deseado usando event.currentTarget.

Funciones de flecha y alcance léxico

A diferencia de las funciones normales, las funciones de flecha no tienen su propio contexto o alcance para ello. En cambio, heredan el alcance léxico del contexto que los rodea. En el ejemplo proporcionado, la función de flecha se define dentro del controlador de eventos de clic de dom.videoLinks. Por lo tanto, esto dentro de la función de flecha se refiere al elemento dom.videoLinks.

Los oyentes de eventos y event.currentTarget

Los oyentes de eventos se adjuntan a elementos específicos y se ejecutan cuando ocurren ciertos eventos. Cuando se activa un evento, el objeto de evento contiene información sobre el elemento de destino que desencadenó el evento y el elemento de destino actual que tiene el detector de eventos adjunto.

La propiedad event.target se refiere al elemento que directamente desencadenó el evento. En la mayoría de los casos, este es el elemento en el que se hizo clic, sobre el que se hizo clic o en el que se destacó.

La propiedad event.currentTarget, por otro lado, se refiere al elemento que tiene el detector de eventos adjunto. Este es el elemento en el que se procesa el evento en el momento de la ejecución.

Uso de event.currentTarget en funciones de flecha

Para acceder al elemento deseado dentro de un controlador de eventos de función de flecha, use event .currentTarget en lugar de esto. Aquí hay una versión modificada del 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

En general, event.currentTarget debe usarse sobre event.target cuando se trabaja con controladores de eventos. Esto se debe a que los eventos pueden aparecer o capturarse en el árbol DOM, y el uso de event.target puede no siempre hacer referencia al elemento al que desea apuntar.

event.currentTarget se refiere consistentemente al elemento que tiene el detector de eventos adjunto a él, independientemente del flujo del evento.

Conclusión

Cuando utilice funciones de flecha en controladores de eventos, recuerde usar event.currentTarget para acceder al elemento deseado. Tenga en cuenta la distinción entre event.target y event.currentTarget cuando trabaje con la difusión y captura de eventos para garantizar un manejo preciso de los eventos.