为什么事件处理程序中的箭头函数中的“this”行为不同？

事件处理程序中的箭头函数和“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: 表示最初触发事件的元素。

在事件冒泡的上下文中，event.currentTarget 在整个传播过程中保持不变，而 event.target 根据当前正在处理的元素而变化

结论

箭头函数在 JavaScript 中提供了简洁的语法，但在事件处理程序中使用“this”时，记住它们独特的作用域行为至关重要。通过利用 event.currentTarget，开发人员可以一致地访问适当的 DOM 元素并有效地处理 JavaScript 应用程序中的事件。

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