将 onclick 分配给功能问题答案

【问题标题】：Assign onclick to a function issue将 onclick 分配给功能问题
【发布时间】：2017-08-16 15:32:52
【问题描述】：

我添加onclick函数的代码如下newbutton.onclick = whoWon(this.id)

其他相关代码

var winner;

function whoWon(name){
   winner = name
}

我的问题是，当我尝试分配它时，onclick 会执行并且不会添加 onclick。我知道这一点，因为当我创建新按钮时，变量获胜者始终是最近创建的按钮。此外，当我检查 google chrome 中的元素时，唯一分配的内容是 ID 和 Class。

【问题讨论】：

【解决方案1】：

newbutton.onclick = whoWon(this.id) 实际上会调用whoWon 函数。

您需要按原样传递whoWon，而不是调用它并将其绑定到this.id。这应该可以解决问题：

newbutton.onclick = whoWon.bind(null, this.id)

或者正如 @styfle 在 cmets 中提到的，您可以创建一个匿名函数：

newbutton.onclick = () => whoWon(this.id)

【讨论】：

【解决方案2】：

您的代码newbutton.onclick = whoWon(this.id) 执行whoWom(this.id) 并将其结果（在本例中为undefined）分配给newbutton.onclick。

你真正应该使用的是：

newbutton.addEventListener('click', whoWon);

从那里您可以使用event.target.id 访问this.id 的等效项

【讨论】：