Question

我是ES6的新手，并且无法完成这项工作：

$(this)在点击时返回undefined？

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');
        });

那么如果我在回调中使用箭头功能，我该怎么办呢？

Answer 1

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

.currentTarget vs .target

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

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

<强> From the documentation:

类型为currentTarget的
EventTarget，readonly用于表示目前正在处理EventTarget的{{1}}。这个在捕获和冒泡期间特别有用。

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

EventListeners

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));

#parent {background-color:red; width:250px; height:220px;}
#child {background-color:yellow;height:120px;width:120px;margin:0 auto;}
#grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;}
#msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;}

Answer 2

你不会。

更改{{1}}的值是使用箭头功能的主要目的。

如果您不想这样做，那么箭头功能是错误的工具。

Answer 3

即使在箭头功能内，您也可以使用&debugQuery=true&enableElevation=true&debug.explain.structured=true代替$(event.target)。箭头函数保留了定义它们的范围的$(this)。在您的情况下，它是this。

Answer 4

箭头功能和这个选择器？

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

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

那么如果我在回调中使用箭头函数，我该怎么办呢？

您已经可以 - 访问事件目标，您可以使用类似$(e.target)的内容，但要小心冒泡。所以我建议使用普通函数作为回调。

Javascript - arrow在事件处理程序中对此进行处理吗？

4 个答案:

.currentTarget vs .target