为什么在 JavaScript 事件处理程序的箭头函数中使用“event.currentTarget”而不是“this”？

箭头函数中的 this：事件处理程序注意事项

在使用 JavaScript 时，开发人员在事件处理程序中使用箭头函数时可能会遇到挑战。默认情况下，当在事件回调中使用箭头函数时，获取它来表示事件处理程序绑定到的元素会出现问题。出现这种情况是因为箭头函数中 this 的值是在其定义期间而不是在使用时确定的。

要解决此问题，建议在使用箭头函数时使用 event.currentTarget 而不是 this在回调中。 event.currentTarget 一致地指定与当前正在执行的事件监听器关联的 DOM 元素，确保可以准确引用所需的元素。

理解 .currentTarget

event.currentTarget 的使用源于事件捕获和冒泡的概念。了解这些机制对于在 JavaScript 中有效地处理事件至关重要。

• event.currentTarget 表示定义事件侦听器的元素，称为事件目标。
• event.target 表示最初触发事件的元素。

事件冒泡和捕获

期间事件传播、浏览器行为可能会受到事件捕获和冒泡的使用的影响。两者都涉及 DOM 树内的事件流，但方向不同。

• 事件冒泡：事件在 DOM 树中向上移动，从目标元素到文档的根。
• 事件捕获：事件沿着 DOM 树向下移动，从文档的根到目标元素。

在事件处理的上下文中，事件之间的区别currentTarget和target变得明显。当事件委托给父元素并在子元素上触发事件时，currentTarget 仍然是父元素，而 target 引用子元素。在处理附加事件侦听器后动态创建或插入到 DOM 中的元素时，这种区别变得尤为重要。

示例：区分 .currentTarget 和 .target

考虑下面的代码片段：

<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中文网其他相关文章！