如何使用 ES6 箭头函数从 jQuery on() 事件中获取元素？ [复制]答案

【问题标题】：How to get the element from a jQuery on() event using an ES6 arrow function? [duplicate]如何使用 ES6 箭头函数从 jQuery on() 事件中获取元素？ [复制]
【发布时间】：2016-07-03 12:03:37
【问题描述】：

在使用 ES6 箭头函数之前，如果我想从 jQuery on() 点击事件中获取元素，那么我可以这样做：

$(document).on('click', '.inserted-el', function(event) {
    console.log(this);
});

但是，使用箭头功能，我无法再以这种方式访问this。如何获取被点击的元素？

【问题讨论】：

这应该可以正常工作。标记看起来如何？？
@Haketo 我已经简化了这个例子，我想在函数中引用词法this。

标签： javascript jquery ecmascript-6

【解决方案1】：

您可以使用event.currentTarget 来引用处理程序的目标元素

$(document).on('click', '.inserted-el', function(event) {
  snippet.log('old -> ' + this.innerHTML + ':' + event.currentTarget.innerHTML);
});
$(document).on('click', '.inserted-el', (event) => {
  snippet.log('new -> ' + this.innerHTML + ':' + event.currentTarget.innerHTML);
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inserted-el">1</button>
<button class="inserted-el">2</button>

【讨论】：

【解决方案2】：

`event.currentTarget`

是你的朋友。

您不能将其作为“this”访问的原因是箭头函数与其父作用域具有相同的“this”。

你也应该知道event.target

http://joequery.me/code/event-target-vs-event-currenttarget-30-seconds/

【讨论】：