Javascript-arrow函数是否在事件处理程序中？

我是ES6新手，无法完全实现这一点：

$（此）

单击时返回未定义

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

那么，如果我在回调函数中使用arrow函数，我该怎么做呢

你不会的

更改

此

的值是使用箭头函数的主要要点

如果您不想这样做，那么箭头函数是错误的作业工具。

您不会这样做

更改

此

的值是使用箭头函数的主要要点

如果您不想这样做，则箭头函数是错误的作业工具。

使用箭头函数作为回调函数，而不是使用

此

获取处理程序绑定到的元素，您应该使用

事件.currentTarget

此

在箭头函数中的值取决于箭头函数的定义位置，而不是使用位置。
因此从现在开始，请记住

event.currentTarget总是指当前正在处理其事件侦听器的
DOM
元素。


.当前目标vs.目标
由于事件冒泡/捕获，请使用
event.currentTarget
而不是
event.target
：


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



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

检查下面片段中的基本示例


var parent=document.getElementById（'parent'）；
parent.addEventListener（'click'，函数（e）{
document.getElementById（'msg'）.innerHTML=“this:”+this.id+
“
currentTarget:”+e.currentTarget.id+
“
目标：”+e.target.id；
});
$（“#父项”）。在（'click'，函数（e）{
$（'#jQmsg'）.html（“*jQuery
this:”+$（this.prop（'id'））
+“
currentTarget:”+$（e.currentTarget）.prop（'id'））
+“
目标：”+$（e.target）.prop（'id'）；
});
$（'#parent'）。在（'click'，e=>$（'#arrmg'）.html（'*Arrow function
currentTarget:'+e.currentTarget.id））
#父{背景色：红色；宽度：250px；高度：220px；}
#子{背景色：黄色；高度：120px；宽度：120px；边距：0自动；}
#孙子{背景颜色：蓝色；高度：50px；宽度：50px；边距：0自动；}
#msg，#jQmsg，#arrmsg{字体大小：16px；字体重量：600；背景色：eee；字体系列：无衬线；颜色：海军；}

父级-（附加的事件处理程序）


儿童


孙子




使用arrow函数作为回调函数，而不是使用
this
获取处理程序绑定到的元素，您应该使用
事件.currentTarget


此
在箭头函数中的值取决于箭头函数的定义位置，而不是使用位置。
因此从现在开始，请记住
event.currentTarget总是指当前正在处理其事件侦听器的
DOM
元素。


.当前目标vs.目标
由于事件冒泡/捕获，请使用
event.currentTarget
而不是
event.target
：


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



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

检查下面片段中的基本示例


var parent=document.getElementById（'parent'）；
parent.addEventListener（'click'，函数（e）{
document.getElementById（'msg'）.innerHTML=“this:”+this.id+
“
currentTarget:”+e.currentTarget.id+
“
目标：”+e.target.id；
});
$（“#父项”）。在（'click'，函数（e）{
$（'#jQmsg'）.html（“*jQuery
this:”+$（this.prop（'id'））
+“
currentTarget:”+$（e.currentTarget）.prop（'id'））
+“
目标：”+$（e.target）.prop（'id'）；
});
$（'#parent'）。在（'click'，e=>$（'#arrmg'）.html（'*Arrow function
currentTarget:'+e.currentTarget.id））
#父{背景色：红色；宽度：250px；高度：220px；}
#子{背景色：黄色；高度：120px；宽度：120px；边距：0自动；}
#孙子{背景颜色：蓝色；高度：50px；宽度：50px；边距：0自动；}
#msg，#jQmsg，#arrmsg{字体大小：16px；字体重量：600；背景色：eee；字体系列：无衬线；颜色：海军；}

父级-（附加的事件处理程序）


儿童


孙子




您可以使用
$（event.target）
而不是
$（this）
，即使在箭头函数中也是如此。箭头函数保留了定义它们的范围的
。在您的情况下，它是未定义的
您可以使用
$（event.target）
而不是
$（this）
，即使在箭头函数中也是如此。箭头函数保留了定义它们的范围的
。在您的情况下，它是
未定义的

箭头函数和这个选择器

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

那么你会怎么做呢
obj.method = function(){
    console.log(this);
    $('a').click(e=>{
            console.log(this);
    })
};
obj.method(); // logs obj
$('a').click(); // logs obj