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 函数引用(不带括号)的想法。