事件函数声明答案

【问题标题】：Event function declaration事件函数声明
【发布时间】：2018-04-23 10:48:17
【问题描述】：

我试图理解这篇文章中事件处理程序的声明和函数声明：https://stackoverflow.com/a/46418688/7727532

我对 Javascript 和 jQuery 很陌生，并试图理解。我所知道的是你声明如下

$('#clickMe').on('click', doSomeThing(e));

function doSomeThing(e){
 console.log(e);
}

我不明白的第一部分是

(e) => this._handleScaling(e)

这里发生了什么？我们捕获当前对象并将其发送到函数_handleScaling()？但是为什么我们之前有“（e）=>”呢？

第二部分是

_handleScaling(e) {

如果我是对的，哪个是另一个内部的本地函数？因为下划线开始。那么也许链接中的代码并没有说明全部情况？

【问题讨论】：

Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?的可能重复
$('#clickMe').on('click', doSomeThing(e)); 是错误的。它立即调用doSomeThing 并将其返回值传递给.on。每当您将函数 call 作为参数“传递”给另一个函数时（foo(bar())，首先评估“内部”函数调用并将其返回值传递给“外部”调用。即@首先调用 987654332@ 并将其返回值传递给 foo。然而，事件处理程序希望传递一个函数。
相关：What's the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
这实际上是打字稿语法，并没有为事件处理本身添加任何内容。你不必为此使用打字稿，如果你知道的话，你可以坚持使用基本的 JS。只是我的看法，但如果您已经非常了解原型的性质，那么 typescript 会比实际的改进带来更多的混乱。
@Kaddath 不完全是，arrow functions 也是 ES6 的一部分

【解决方案1】：

你需要给出函数引用而不是函数的返回值

替换

$('#clickMe').on('click', doSomeThing(e));

与

$('#clickMe').on('click', doSomeThing); //e is the event object will be automatically passed on to the event handler

我不明白的第一部分是

(e) => this._handleScaling(e)这里发生了什么？我们抓住当前对象并将其发送到函数_handleScaling()？但是为什么我们之前有"(e) =>"？

不，_handleScaling 仅传递 e（事件对象），以便它可以访问使用 e.target 触发此 event 的元素，因为使用 arrow function this 将引用定义此 箭头函数 的范围。

【讨论】：