为事件监听器传递参数答案

【问题标题】：passing parameter for event listener为事件监听器传递参数
【发布时间】：2016-08-13 22:46:22
【问题描述】：

  window.addEventListener('keydown',function keydown_f(e){
    if(e.code === 'ArrowDown') {
      window.removeEventListener('keydown',keydown_f);
      // do something
      setTimeout(2000,function(){
        window.addEventListener('keydown',keydown_f);
      });
    }
    else if (e.code === 'ArrowUp') {
      window.removeEventListener('keydown',keydown_f);
      // do something
      setTimeout(2000,function(){
        window.addEventListener('keydown',keydown_f);
      });
    }
  });

我使用上面的代码每 2 秒捕获一次 keydown 事件。我认为它不会起作用，因为当 2000 毫秒后事件监听器被添加回来（第 6 行和第 13 行）时，它没有指定它得到什么参数，就像我写的第一行一样

  window.addEventListener('keydown',function keydown_f(){  //without "e"

这应该会触发像

这样的错误

Uncaught ReferenceError: e is not defined

但实际上代码是有效的，我不明白为什么当监听器被添加回来时它识别e而不指定e作为参数？

【问题讨论】：

当你引用一个函数时，参数总是自动传递的，这里没有什么神奇的吗？
@adeneo “参数是自动传递的”——这有点误导。调用者明确地传递它们，它不是“自动的”。
@zerkms - 当然，参数总是必须由调用者传递才能存在于被调用函数中，所以我想你可以说参数在命名函数和匿名函数中都是自动传递的，假设他们实际上已经通过了。 OP 似乎遇到的真正问题是，认为命名“匿名”函数会产生任何影响，从函数中省略 e 参数总是会使 e 未定义，这更加明显，无论函数的名称或调用方式。

标签： javascript function parameter-passing addeventlistener

【解决方案1】：

因为是您设置“function keydown_f”的上下文，所以它可以访问：

   if(e.code === 'ArrowDown') {
  window.removeEventListener('keydown',keydown_f);
  // do something
  setTimeout(2000,function(){
    window.addEventListener('keydown',keydown_f);
  });
}
else if (e.code === 'ArrowUp') {
  window.removeEventListener('keydown',keydown_f);
  // do something
  setTimeout(2000,function(){
    window.addEventListener('keydown',keydown_f);
  });
}

在范围内。

函数本身“keydown_f”接受一个参数---“e”。所以，当你调用它时，可以说：window.addEventListener('keydown',keydown_f);

“事件”通过了。

基本上，“addEventListener”会抓取这个：“keydown_f”，然后执行这个：“keydown_f(event)”

把“keydown_f”想象成一个回调，嗯，它是一个回调。 “addEventListener”使用该函数，并“调用它”并传入它的参数 = event。

【讨论】：