Javascript - 箭头在事件处理程序中发挥作用？

IT技术 javascript jquery ecmascript-6
2021-02-06 17:39:18

我是 ES6 的新手，无法让它发挥作用：

$(this) 点击返回未定义？ 

dom.videoLinks.click((e) => {
            e.preventDefault();
            console.log($(this));
            var self = $(this),
                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');
        });

但是，如果我更改它而不是像这样的箭头函数，它会按预期工作吗？：

dom.videoLinks.click(function(e) {
            e.preventDefault();
            console.log(this);
            console.log($(this));
            var self = e.this,
                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');
        });

那么如果我在回调中使用箭头函数，我将如何处理呢？

4个回答

使用箭头函数作为回调，而不是this用于获取处理程序绑定到的元素，您应该使用event.currentTarget. 箭头函数内部的
值this取决于箭头函数的定义位置，而不是使用位置。
所以从现在开始，请记住， event.currentTarget 始终指的 是当前正在处理其 EventListeners的DOM 元素。

.currentTarget 与 .target

使用event.currentTarget而不是event.target因为事件冒泡/捕获：

  • event.currentTarget- 是附加了事件侦听器的元素。
  • event.target- 是触发事件的元素。

从文档：

currentTarget型的EventTarget，只读的用于指示 EventTarget其EventListeners当前正在处理。这在捕获和冒泡期间特别有用。

检查以下代码段中的基本示例

显示代码片段

你不会。

更改 的值this是使用箭头函数的主要点。

如果您不想这样做，那么箭头函数就是不适合这项工作的工具。

您甚至可以在箭头函数内部使用$(event.target)代替$(this)。箭头函数保留this了定义它们的范围。在你的情况下是undefined。

箭头函数和这个选择器？

箭头函数this从封闭上下文中保留。例如。

obj.method = function(){
    console.log(this);
    $('a').click(e=>{
            console.log(this);
    })
};
obj.method(); // logs obj
$('a').click(); // logs obj

那么如果我在回调中使用箭头函数，我将如何处理呢？

您已经可以 - 要访问事件目标，您可以使用类似的东西 $(e.target)，但要注意冒泡。所以我建议使用普通函数代替回调。

其它你可能感兴趣的问题
上一篇如何使用 JQuery 填充级联下拉列表 下一篇如何让 JS 知道应用程序根？