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

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

所以你想要：

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

Answer 2

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

txtAmount.addEventListener("keyup", UpdateTotals);

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

请参阅this link有关JavaScript函数引用的概念（没有括号）。

Answer 3

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

变化：

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

为：

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

JavaScript addEventListener函数语法

3 个答案: