javascript - 带参数的事件监听器

Question

我想将参数传递给 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 没有立即调用。这是为什么？

但是，我不知道如何在每个函数中传递参数。我知道“works”文字被传递给 eventFunction 上的 myStr。然而，在函数 func 中，有一个额外的事件参数不是由 eventFunction 传递的。

另外，为什么 eventFunction 需要返回另一个带有一个参数的函数，该函数在内部调用 func 函数？

另请注意，我想将参数传递给没有全局作用域的 eventFunction，否则就不需要传递参数。

Answer 1

让我们一步步剖析这个问题。

一般信息

.addEventListener 函数/方法接受 2 个(或 3 个)参数:

• 一个 String，其值为事件类型/名称(例如 “click”)
• 指向函数的指针，该函数应在事件发生时执行
• bool 值，指定是否应使用事件冒泡或事件传播。该参数是可选的，可以省略。

示例 1

在第一个示例中，您传递了一个字符串(“click”)和一个函数的指针> (eventFunction) 到 .addEventListener 中。一切都按预期进行，事件发生并执行函数。

示例 2

在此示例中，您将 String 和 undefined 传递给 .addEventListener，这不是 .addEventListener > 期望。您可能会问自己“我什么时候传入undefined？”。好吧，当您通过在其后添加括号 () 来执行您的 eventFunction 时，就会发生这种情况。这里，JS 的语法与大多数其他语言的语法相同，在函数右侧添加括号来执行该函数。

由于您的 eventFunction 未显式返回任何内容，因此它会自动返回 undefined。因此，这就是 .addEventListener 得到的:

clicker.addEventListener("click", undefined)

但是，由于您执行了 eventFunction，它会将“It Worked”记录到控制台一次。

示例3

此示例失败的原因与示例 2 失败的原因相同。

示例 4

最后一个示例中的代码可以工作，因为它使用了一个称为闭包的概念。这个概念实际上有数千种解释，所以我在这里的解释非常简短。如果你理解起来有困难，可以google一下“JavaScript 闭包”。

与许多其他语言相比，JavaScript 有函数作用域而不是 block 作用域。因此，如果您在函数 F 中定义变量并从 F 中返回另一个函数 G，则 G 将具有从F内部访问变量和参数。。出于演示目的:

function F () {
  var fVariable = 'Defined in F';
  return function G () {
    return fVariable; // <-- this is the closure
  }
}

var funcG = F(); // <-- execute F
funcG(); // -> 'Defined in F';

将这个简短的示例与您的第四个代码进行比较:它们几乎相同。唯一的区别是，您的代码创建了一个额外的函数 func。

现在，如果您调用clicker.addEventListener("click", eventFunction("it Works"))，您执行eventFunction，它返回另一个(匿名/lambda)函数，该函数通过闭包封装“it Works”字符串。如果我们手动写出来，这就是 .addEventListener “看到”的内容:

clicker.addEventListener("click", function (event) {
  func("it works", event);
});

编辑:解决问题

这是一个工作示例，请注意，我更改了函数名称以反射(reflect)其用途:

function eventHandlerFactory (myStr) { // <-- eventFunction in your code
  return function executeOnEvent (event) { // <-- executed if an event occurs
    console.log(myStr);
    console.log(event);
  }
}

clicker.addEventListener("click", eventHandlerFactory("it worked"));

eventHandlerFactory 函数返回一个函数 executeOnEvent，该函数被传递到 .addEventListener 中。再用手写出来，解释器是这样理解的:

clicker.addEventListener("click", function executeOnEvent (event) {
  console.log("it works");
  console.log(event);
});