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

Posted 2023-05-07

【中文标题】如何使用 ES6 箭头函数从 jQuery on() 事件中获取元素？ [复制]

【英文标题】：How to get the element from a jQuery on() event using an ES6 arrow function? [duplicate]

【发布时间】：2016-07-03 12:03:37

【问题描述】：

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

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

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

【问题讨论】：

这应该可以正常工作。标记看起来如何？？

@Haketo 我已经简化了这个例子，我想在函数中引用词法this。

【参考方案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/