小编Par*_*i I的帖子

我想将参数传递给 Javascript 中的事件侦听器。我找到了解决方案，但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用。

我有 C/C++ 背景，但是 Javascript 函数的执行有很大不同。您能否帮助我理解以下示例如何以及为何有效或无效？

没有参数，代码可以正常工作：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction);

function eventFunction()
{
  console.log("works");
}

如果我在 eventListener 上包含括号，该函数将在没有事件触发的情况下执行一次，然后不执行任何操作：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction());

function eventFunction()
{
  console.log("works");
}

我想这是因为该函数是在 eventListener 处调用的，并且这不允许 eventListener 函数稍后调用 eventFunction。

当我想用 eventFunction 传递参数时。以下不起作用：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction("works"));

function eventFunction(myStr)
{
    console.log(myStr);
}

它在不触发事件的情况下调用 eventFunction，然后当事件触发时不执行任何操作，这与之前的行为相同。到目前为止我想我能理解。

为了在事件函数中正确传递参数，我找到了以下代码。以下解决方案工作正常：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction("works"));

function eventFunction(myStr)
{
  function func(event, myStr)
  {
    console.log(myStr);
  }

  return function(event) { 
    func(event,myStr) 
  };
}

我注意到的第一件事是这个 eventFunction …