为什么'this”在事件处理中的箭头函数中的行为不符合预期？

了解 JavaScript 中事件处理的箭头函数行为

在事件处理中使用箭头函数作为回调时，重要的是要考虑this 和 event.currentTarget 之间的区别。在箭头函数中，this 指的是定义函数的上下文，而不是使用函数的上下文。因此，要访问处理程序绑定的元素，需要使用 event.currentTarget 而不是 this。

event.currentTarget 和 event.target 的区别

理解 event.currentTarget 和 event.target 之间的区别对于事件冒泡和捕获至关重要。 event.currentTarget 表示附加了事件监听器的元素，而 event.target 表示最初触发事件的元素。

根据文档：“currentTarget of type EventTarget, readonly。用于指示 EventTarget当前正在处理其 EventListener。这在捕获和冒泡期间特别有用。”

示例：使用冒泡和捕获进行事件传播

在给定的代码片段中，在事件处理中使用 this 和 event.currentTarget 的区别如下：

<code class="javascript">var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {

  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
});

$('#parent').on('click', function(e) {

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>

当事件发生时，它会通过 DOM 传播，从目标元素开始，沿着树向上移动到根。在此过程中，event.target 表示在每个级别触发事件的元素，而 event.currentTarget 表示附加了事件监听器的元素。

Summary

为了确保使用箭头函数正确处理事件，必须了解 this 和 event.currentTarget 之间的区别。使用 event.currentTarget 允许您访问与事件侦听器关联的元素，无论定义箭头函数的上下文如何。

以上是为什么'this”在事件处理中的箭头函数中的行为不符合预期？的详细内容。更多信息请关注PHP中文网其他相关文章！