JavaScript addEventListener 函数语法

Question

我无法理解为什么事件侦听器的函数参数不只接受函数。代码如下：

声明变量：

var spanJS = document.getElementById("spanJS")
var txtPlayers = document.getElementById("ContentPlaceHolder1_txtPlayers")
var txtAmount = document.getElementById("ContentPlaceHolder1_txtAmount")

然后关联事件监听器：

txtAmount.addEventListener("keyup", UpdateTotals())
txtPlayers.addEventListener("keyup", UpdateTotals())

然后是函数：

function UpdateTotals() {
      ... 
}

这是整个代码。问题是，当我运行它时，它在没有任何 keyup 事件的情况下执行 UpdateTotals()，并且侦听器不起作用。

如果我进行以下更改，它会按预期工作：

txtAmount.addEventListener("keyup", function () {
UpdateTotals()
})
txtPlayers.addEventListener("keyup", function () {
UpdateTotals()
})

谁能解释一下为什么我不能只输入函数的名称，我必须将它“孩子”到另一个函数中？

Answer 1

您需要通过删除处理程序名称末尾的() 来更改事件侦听器，如下所示：

txtAmount.addEventListener("keyup", UpdateTotals);

这是传递函数UpdateTotals 的引用，而不是运行函数UpdateTotals()。后者实际上会立即运行函数，并传入函数的返回值。

请参阅this link 了解 JavaScript 函数引用（不带括号）的概念。

Answer 2

在 Javascript 中，UpdateTotals() 是在不传递参数的情况下调用函数时的值，而 UpdateTotals 是函数本身

所以你想要：

txtAmount.addEventListener("keyup", UpdateTotals)
txtPlayers.addEventListener("keyup", UpdateTotals)

Answer 3

您不需要事件侦听器中的括号。

变化：

txtAmount.addEventListener("keyup", UpdateTotals())
txtPlayers.addEventListener("keyup", UpdateTotals())

到：

txtAmount.addEventListener("keyup", UpdateTotals)
txtPlayers.addEventListener("keyup", UpdateTotals)