如何在事件侦听器上调用带有参数的函数 JavaScript

在 JavaScript 中，事件侦听器是处理 HTML 元素事件的回调函数。有时候我们需要调用带有参数的函数来处理特定事件。本文将介绍如何在事件侦听器上调用带有参数的函数。

将函数作为参数传递给事件处理程序

我们可以将需要传入事件处理程序的参数作为一个函数的参数。例如，我们要传入一个数字来更新 HTML 元素的值。我们可以创建一个函数，名为 updateValue，这个函数接受一个参数，它将参数作为 HTML 元素的值。

function updateValue(num) {
  document.getElementById("my-element").innerHTML = num;
}

接下来，我们给 HTML 元素添加一个点击事件。在事件处理程序中，我们调用 updateValue 函数，并传入一个数字 10。

document.getElementById("my-element").addEventListener("click", function() {
  updateValue(10);
});

当我们点击这个 HTML 元素时，它的值将被更新为 10。

使用箭头函数

我们也可以使用 ES6 中的箭头函数来传递参数到事件处理程序中。

document.getElementById("my-element").addEventListener("click", () => {
  updateValue(10);
});

这段代码和上面的代码实现相同的效果。

使用闭包

另一种方法是使用闭包来传递参数。

function updateValue(num) {
  return function() {
    document.getElementById("my-element").innerHTML = num;
  }
}

document.getElementById("my-element").addEventListener("click", updateValue(10));

在这个例子中，updateValue 函数返回一个新的函数。这个新的函数将被添加到 HTML 元素的事件侦听器中。当 HTML 元素被点击时，这个新的函数将被调用，它可以访问 updateValue 函数的参数，因为它是闭包的一部分。

结论

以上是三种在事件侦听器上调用带有参数的函数的方法。无论你选择哪种方法，都可以实现传递参数到事件处理程序。