JavaScript addEventListener函数语法

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

变量声明为：

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

---

有人能解释一下为什么我不能直接输入函数名，我必须在另一个函数中“child”它吗？

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

所以你想要：

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

---

您需要通过删除处理程序名称末尾的

（）

来更改事件侦听器，如下所示：

txtAmount.addEventListener("keyup", UpdateTotals);

这是为了传递函数

UpdateTotals

的引用，而不是运行函数

UpdateTotals（）

。后者实际上会立即运行函数，并传入函数的返回值

---

有关JavaScript函数引用（不带括号）的概念，请参见。

事件侦听器中不需要括号

更改：

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

致：

---

这回答了你的问题吗？

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