事件处理程序中的箭头函数和“this”绑定
使用 JavaScript 的 ES6 箭头函数时,开发人员在依赖时可能会遇到意外行为事件处理程序中的“this”关键字。与传统函数表达式不同,箭头函数从其周围范围继承 this 上下文,而不是从调用它们的上下文继承。
问题:未定义 $(this)
在提供的代码片段中,箭头函数方法将“this”绑定到全局上下文(窗口对象),而不是附加到事件侦听器的预期元素。结果,$(this) 返回 undefined,因为全局上下文中没有对应的 jQuery 对象。
解决方案:使用 event.currentTarget
来解决此问题并获取正确的元素引用,建议在事件处理程序中使用 event.currentTarget。与“this”不同,event.currentTarget 始终引用事件侦听器当前正在处理的 DOM 元素。
使用 event.currentTarget 的示例
这里是修改后的代码片段使用 event.currentTarget 修复:
<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。
在事件冒泡的上下文中,event.currentTarget 在整个传播过程中保持不变,而 event.target 根据当前正在处理的元素而变化
结论
箭头函数在 JavaScript 中提供了简洁的语法,但在事件处理程序中使用“this”时,记住它们独特的作用域行为至关重要。通过利用 event.currentTarget,开发人员可以一致地访问适当的 DOM 元素并有效地处理 JavaScript 应用程序中的事件。
以上是为什么事件处理程序中的箭头函数中的“this”行为不同?的详细内容。更多信息请关注PHP中文网其他相关文章!