带有参数的JavaScript addEventListener函数[重复]

Posted 2023-02-21

【中文标题】带有参数的JavaScript addEventListener函数[重复]

【英文标题】：JavaScript addEventListener function with parameters [duplicate]

【发布时间】：2021-01-27 23:19:19

【问题描述】：

我想知道是否有办法将带参数的函数传递给 JS addEventListener？

我尝试过直接绑定一个带参数的函数到addEventListener，但是监听器不起作用并立即执行函数而没有触发事件。

document.getElementById("button1").addEventListener("click", test1("text I would like to pass"));

function test1(text) 
  console.log(text);

<button id="button1">Click Me</button>

如果绑定的函数不包含任何参数，监听器将工作：

document.getElementById("button1").addEventListener("click", test1);

function test1() 
  console.log("text I would like to pass");

<button id="button1">Click Me</button>

我也尝试过使用onclick 做同样的事情，但同样的情况发生了。那么，如何将带参数的函数绑定到addEventListener呢？

【问题讨论】：

.addEventListener("click", () => test("text i would like to pass"));

或.addEventListener("click", test.bind(null, "text i would like to pass"))

【参考方案1】：

您可以使用 () => 在此处调用您的函数 或 function() 在此处调用您的函数

document.getElementById("button1")
.addEventListener("click", () =>  test1("four"););

function test1(text) 
  console.log(text);

<button id="button1">Click Me</button>