JavaScript 将参数传递给事件侦听器 - JavaScript

在 JavaScript 中，事件侦听器（也称为事件处理程序）可以在事件触发时执行一个函数。可以通过 addEventListener 方法向元素添加事件侦听器。

当在函数中需要使用某些值时，可以通过在 addEventListener 中传递一个函数来将值传递给事件处理程序。

传递参数

下面是一个示例，该示例创建一个按钮并将参数传递给点击事件处理程序函数：

// 创建按钮
var button = document.createElement('button');
button.textContent = 'Click me!';

// 添加点击事件侦听器
button.addEventListener('click', function(event) {
  handleClick(event, 'Hello, World!');
});

// 点击事件处理程序函数
function handleClick(event, greeting) {
  alert(greeting);
}

在上面的示例中，当按钮被点击时，将调用 handleClick 函数。该函数将事件对象和 'Hello, World!' 字符串作为参数传递。

使用闭包

还可以使用 JavaScript 中的闭包将外部变量传递给事件处理程序。这可以通过将变量定义在事件侦听器函数的外部来实现。

以下是一个更复杂的示例，该示例创建多个按钮，并根据该按钮的文本内容将不同的消息传递给单击事件处理程序函数：

// 创建按钮数组
var buttons = ['Button 1', 'Button 2', 'Button 3'].map(createButton);

// 将按钮添加到页面
var container = document.getElementById('container');
buttons.forEach(container.appendChild.bind(container));

// 创建按钮
function createButton(text) {
  var button = document.createElement('button');
  button.textContent = text;

  // 使用闭包将消息传递给事件处理程序
  button.addEventListener('click', (function(message) {
    return function(event) {
      handleClick(event, message);
    };
  })(getMessage(text)));

  return button;
}

// 获取消息
function getMessage(text) {
  return 'Hello, ' + text;
}

// 点击事件处理程序
function handleClick(event, message) {
  alert(message);
}

在上面的示例中，createButton 函数使用闭包将 getMessage 函数返回的带有文本内容的消息传递给事件处理程序。当该按钮被单击时，将调用 handleClick 函数并显示该消息。