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() {
      ... 
}

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

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

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

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

Answer 1

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

txtAmount.addEventListener("keyup", UpdateTotals);

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

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