在使用 JavaScript 时，开发人员在事件处理程序中使用箭头函数时可能会遇到挑战。默认情况下，当在事件回调中使用箭头函数时，获取它来表示事件处理程序绑定到的元素会出现问题。出现这种情况是因为箭头函数中 this 的值是在其定义期间而不是在使用时确定的。
要解决此问题，建议在使用箭头函数时使用 event.currentTarget 而不是 this在回调中。 event.currentTarget 一致地指定与当前正在执行的事件监听器关联的 DOM 元素，确保可以准确引用所需的元素。
event.currentTarget 的使用源于事件捕获和冒泡的概念。了解这些机制对于在 JavaScript 中有效地处理事件至关重要。
期间事件传播、浏览器行为可能会受到事件捕获和冒泡的使用的影响。两者都涉及 DOM 树内的事件流，但方向不同。
在事件处理的上下文中，事件之间的区别currentTarget和target变得明显。当事件委托给父元素并在子元素上触发事件时，currentTarget 仍然是父元素，而 target 引用子元素。在处理附加事件侦听器后动态创建或插入到 DOM 中的元素时，这种区别变得尤为重要。
考虑下面的代码片段：
<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>执行此代码片段时，单击子元素或孙元素会触发事件冒泡。下表演示了结果行为：
| Event Listener | this | currentTarget | target |
|---|---|---|---|
| function | child | parent | child/grand-child |
| jQuery | parent | parent | child/grand-child |
| Arrow function | undefined | parent | child/grand-child |
从表中可以明显看出，当使用箭头函数时，这会返回 undefined，突出显示需要使用 event.currentTarget 来代替。通过使用 event.currentTarget，始终可以在箭头函数中引用正确的元素，从而确保 JavaScript 中有效的事件处理。
以上是为什么在 JavaScript 事件处理程序的箭头函数中使用'event.currentTarget”而不是'this”？的详细内容。更多信息请关注PHP中文网其他相关文章！
