JavaScript 中用作事件处理程序的箭头函数中的“this”如何表现？

Javascript - 箭头函数在事件处理程序中

在 ES6 中，有一个新的箭头函数概念，它提供了简洁明了的功能定义函数的方法。但是，当在事件处理程序中使用箭头函数作为回调时，理解其行为变得至关重要。

问题

在提供的代码中，一个事件。未使用 currentTarget 属性，点击元素时箭头函数返回 undefined。

箭头函数中的 this

与常规函数不同，里面的 this 值箭头函数是由定义箭头函数的位置决定的，而不是由使用它的位置决定的。在提供的示例中，箭头函数是在较大函数的上下文中定义的，这可能会导致意外行为。

解决方案

解决此问题问题，而不是访问 this，应该使用 event.currentTarget 来获取处理程序绑定到的元素。 event.currentTarget 始终引用其 EventListeners 当前正在处理的 DOM 元素。以下是修改代码的方法：

<code class="javascript">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');
});</code>

.currentTarget 与 .target

另一个需要注意的重要区别是 event.currentTarget 和 event 的行为.target 在事件冒泡和捕获的上下文中。

• currentTarget：表示附加了事件侦听器的元素。
• target ：表示触发事件的元素。

在处理嵌套元素和事件传播时，使用 event.currentTarget 可确保始终引用正确的元素。

< ;h3>示例

提供的代码片段演示了 this、event.currentTarget 和 event.target 之间的区别。通过单击不同的元素，输出会显示每个属性的值如何根据触发的元素和事件侦听器的上下文而变化。

以上是JavaScript 中用作事件处理程序的箭头函数中的“this”如何表现？的详细内容。更多信息请关注PHP中文网其他相关文章！