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

任何人都可以解释为什么我不能只输入函数的名称，我必须 "child" 它在另一个函数中吗？

Answer 1

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

所以你想要：

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

Answer 2

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

txtAmount.addEventListener("keyup", UpdateTotals);

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

请参阅 this link 关于 JavaScript 函数引用（不带括号）的想法。

Answer 3

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

变化：

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

至：

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

JavaScript addEventListener 函数语法

JavaScript addEventListener function syntax

javascript

syntax

function

addeventlistener