在方法addEventListener中，如何将参数x传递给实现console.log(x)的匿名函数可以return事件？

Question

我不明白 console.log(x) 在下面的情况下是如何工作的。我知道 addEventListener("keydown", function) 表示按下时执行功能（此处打印到控制台）。

但是，当我们在方法 addEventListener() 中将参数传递给匿名函数（此处 x）时，我真的无法理解事情是如何工作的，然后实现 console.log(x) 将将 keydown 事件打印到控制台。

document.addEventListener("keydown", function(x) {
console.log(x); // e.g. KeyboardEvent {isTrusted: true, key: "x", code: "KeyX", location: 0, ctrlKey: false, …}
});

同（一个小通知，使用 event 我可以只使用 function() 并且它仍然有效）：

document.addEventListener("keydown", function() { //here no need to input `event` as parameter
console.log(event); // e.g. KeyboardEvent {isTrusted: true, key: "x", code: "KeyX", location: 0, ctrlKey: false, …}
});

但是

document.addEventListener("keydown", function() { //no parameter
console.log(x); // Uncaught ReferenceError: x is not defined
});

Answer 1

当事件被触发时，调用的函数默认获取作为参数传递给它的 Event 对象。在第一种情况下，由于函数的唯一参数是 x，它接收 Event 对象。其实相当于这样写：

document.addEventListener("keydown", function() {
  var x = event;
  console.log(x);
});

在第二种情况下，您直接通过 event 变量访问 Event 对象（即不将其分配给另一个变量）。在第三种情况下，您试图访问未定义的变量 x，因此出现错误消息。

Answer 2

让我们用自己的逻辑复制这些场景，以更好地说明发生了什么。我将通过直接调用回调而不是等待事件来稍微简化事情。这对您所询问的事情没有任何影响。

设置

让我们考虑以下接受和调用回调的简单函数：

function fire(callback) {
  callback(42);
}

如您所见，fire 将参数传递给回调。

事件处理程序也是如此：当事件触发时，浏览器将调用事件处理程序并将当前事件对象传递给它。

第一个场景

如果一个函数定义了一个参数，它可以访问传递的参数。因此，如果我按如下方式调用 fire：

fire(function(x) {
  console.log(x);
});

然后我的回调接收并记录 42。我可以为参数选择任何名称，它会起作用。

这与您的第一个示例相同：您正在定义一个参数并决定将其命名为 x。您可以给它起任何其他名称。

第二种情况

在此示例中，您正在访问变量 event。因为变量没有在函数内部定义，也不是参数，所以它将在外部作用域中查找（闭包基本上就是这样工作的）。现在，碰巧 event 是 global variable that refers to the currently handled event.

这在我们的玩具示例中如何工作？假设fire先把值赋给一个全局变量：

var globalArg;

function fire(callback) {
  globalArg = 42;
  callback(globalArg);
}

您可以看到该值可用作回调的参数以及全局变量 globalArg。这就是为什么这两个示例都有效（对应于您的第一个和第二个场景）：

fire(function(x) {
  console.log(x);
});

fire(function() {
  console.log(globalArg);
});

第三种情况

与第二种情况类似，x是一个既没有在函数内部定义也不是参数的变量。所以在外部环境中查找变量。但是，它在那里也不存在，因此会引发错误。

在方法addEventListener中，如何将参数x传递给实现console.log(x)的匿名函数可以return事件？

In the method addEventListener, how does passing a parameter x to anonymous function that implement console.log(x) can return the event?

javascript

anonymous-function

dom-events

console.log

设置

第一个场景

第二种情况

第三种情况