JavaScript - 箭头函数和事件处理程序

当使用箭头函数作为事件处理程序的回调时，函数中的 this 值是意外的。这篇博文解释了此行为背后的原因，并提供了使用 event.currentTarget.

箭头函数和词法作用域访问预期元素的解决方案

与常规函数不同，箭头函数没有其自己的上下文或范围。相反，它们继承了周围上下文的词汇范围。在提供的示例中，箭头函数是在 dom.videoLinks 的单击事件处理程序中定义的。因此，箭头函数中的 this 指的是 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 与 .target

一般来说，在使用事件处理程序时，应该使用 event.currentTarget 而不是 event.target。这是因为事件可以在 DOM 树中向上冒泡或向下捕获，并且使用 event.target 可能并不总是引用您想要定位的元素。

event.currentTarget 始终引用具有事件侦听器的元素无论事件流如何，都附加到它。

结论

在事件处理程序中使用箭头函数时，请记住使用 event.currentTarget 来访问预期元素。在处理事件冒泡和捕获时，请记住 event.target 和 event.currentTarget 之间的区别，以确保准确的事件处理。