为什么调用时带参数的函数不需要（args）？ [复制]

Question

为什么当你这样做时：

var foo = document.getElementById("foo");
foo.addEventListener("keydown", foo);
function foo(e){
 console.log(e.keyCode);
}

为什么你不需要这个：

var foo = document.getElementById("foo");
foo.addEventListener("keydown", foo(e));
function foo(e){
 console.log(e.keyCode);
}

但在某些情况下，如果你通过参数传递一些东西，你会这样做：

var foo = document.getElementById("foo");
foo.addEventListener("keydown", foo("Hello, world!"));
function foo(e){
 console.log(e);
}

为什么为什么为什么！！！

Answer 1

但在某些情况下，如果你通过参数传递一些东西，你 会这样做：

var foo = document.getElementById("foo");
foo.addEventListener("keydown", foo("Hello, world!"));

function foo(e){
 console.log(e);
}

不，你不会。这将立即使用它的参数调用foo，无论调用它的返回值是什么（在你的示例中，undefined），然后是什么成为keydown 事件的回调引用，undefined 不能成为回调引用。

让我们看看实际情况。下面，"Hello, world!" 会立即写入控制台，当您按下输入时没有任何反应：

var input = document.getElementById("input");
input.addEventListener("keydown", foo("Hello, world!"));
function foo(e){
 console.log(e);  // Immediately written to console!
}

<input id="input">  

.addEventListener() 的第二个参数采用函数reference，您可以通过多种方式提供该函数：

提供函数的名称（无括号）：

 .addEventListener("click", foo);

提供一个匿名函数（不调用函数，只是传递它）：

 .addEventListener("click", function(){ // function body  });

提供要执行的代码以返回一个函数（注意此处的括号），该函数将首先调用foo，foo 的返回值（应该是一个函数）将作为回调引用：

 function foo(){
   return function(){ console.log("Hello, world!");  };
 }

 .addEventListener("click", foo());  // foo is invoked first

但是，正如您所看到的，如果您包含括号，则您将立即调用该函数，因此如果 foo 需要作为函数引用并且它需要参数，则您不能在 foo 中编写此代码不返回函数： .addEventListener("click", foo(arg));

因此，您必须将函数调用包装在我们之前看到的匿名函数中：

function foo(e){
 console.log(e);  
}
var input = document.getElementById("input");

// The anonymous function is the reference to execute when 
// the event is triggered. When that happens, the anonymous
// function will call foo with its arguments.
input.addEventListener("keydown", function(){ foo("Hello, world!"); });

<input id="input">