JavaScript addEventListener 传递参数

在 JavaScript 中，我们可以使用 addEventListener 来对一个元素添加事件监听器，例如：

const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

这段代码可以将点击事件监听器添加到 id 为 myButton 的按钮上，并在点击该按钮时打印一条消息到控制台。

但是，有时候我们可能需要在事件监听器中使用一些额外的参数，那么应该如何传递这些参数呢？

传递参数的两种方式

一种常见的方式是使用闭包，例如：

const button = document.querySelector('#myButton');
const message = 'Hello, world!';
button.addEventListener('click', () => {
  console.log(message);
});

这段代码通过使用闭包引用了一个名为 message 的变量，并在按钮被点击时打印出了该变量的值。

另一种方式是使用事件对象中的 detail 属性，例如：

const button = document.querySelector('#myButton');
const message = 'Hello, world!';
button.addEventListener('click', (event) => {
  console.log(event.detail);
});
const customEvent = new CustomEvent('myEvent', { detail: message });
button.dispatchEvent(customEvent);

这段代码通过创建一个自定义事件，并将额外的参数存储到 detail 属性中，然后在按钮上触发该事件。事件监听器可以通过访问事件对象中的 detail 属性来获取传递的参数。

总结

这篇文章介绍了在 JavaScript 中如何传递参数到事件监听器中。我们可以使用闭包或者自定义事件对象中的 detail 属性来实现这一功能。