Javascript 在addEventListener方法中，将参数x传递给实现console.log（x）的匿名函数如何返回事件？

我不明白

console.log（x）

在下面的情况下是如何工作的。 我理解

addEventListener（“keydown”，function）

意味着当按下键时，执行该功能（此处打印到控制台）

然而，当我们在addEventListener（）方法中将一个参数传递给一个匿名函数（这里是

x

），然后实现console.log（x）将

keydown

事件打印到console时，我真的无法理解它是如何工作的

document.addEventListener（“向下键”，函数（x）{
console.log（x）；//例如KeyboardEvent{isTrusted:true，key:x，code:KeyX，location:0，ctrlKey:false，…}
});

同 （一个小提示是，对于

事件

我可以只使用

函数（）

，它仍在工作）：

document.addEventListener（“keydown”，function（）{//这里不需要输入`event`作为参数
console.log（event）；//例如KeyboardEvent{isTrusted:true，key:x，code:KeyX，location:0，ctrlKey:false，…}
});

但是

document.addEventListener（“keydown”，function（）{//无参数
console.log（x）；//未捕获引用错误：未定义x
});

当触发事件时，被调用的函数会获取默认情况下作为参数传递给它的

事件

对象。在第一种情况下，由于函数的唯一参数是

x

，因此它接收

事件

对象。事实上，这相当于写下：

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

---

在第二种情况下，您直接通过

事件

变量访问

事件

对象（即不将其分配给另一个变量）。在第三种情况下，您试图访问一个未定义的变量

x

，因此会出现错误消息。

当触发事件时，调用的函数会默认将

事件

对象作为参数传递给它。在第一种情况下，由于函数的唯一参数是

x

，因此它接收

事件

对象。事实上，这相当于写下：

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

---

在第二种情况下，您直接通过

事件

变量访问

事件

对象（即不将其分配给另一个变量）。在第三种情况下，您试图访问一个未定义的变量

x

，因此出现了错误消息。

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

安装程序

让我们考虑下面的简单函数，它接受并调用回调：

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

如您所见，

fire

将参数传递给回调函数

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

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

fire

：

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

然后我的回调接收并记录

42

。我可以为参数选择任何名称，这样就可以了

这与第一个示例中的相同：您正在定义一个参数并决定将其命名为

x

。你可以给它取其他名字

第二种情况 在本例中，您正在访问变量

事件

。因为变量不是在函数内部定义的，也不是参数，所以它将在外部范围中查找（闭包基本上就是这样工作的）。现在，

事件

恰好是一个事件

在我们的玩具示例中，这将如何工作？假设

fire

首先将值分配给全局变量：

var globalArg;

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

您可以看到，该值作为回调的参数以及全局变量

globalArg

可用。这就是为什么这两个示例都有效（对应于第一个和第二个场景）：

第三种情况

---

与第二种情况类似，

x

是一个既不是函数内部定义的变量，也不是参数。因此，在外部环境中查找变量。但是，它也不存在，因此会抛出错误。

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

安装程序

让我们考虑下面的简单函数，它接受并调用回调：

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

如您所见，

fire

将参数传递给回调函数

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

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

fire

：

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

然后我的回调接收并记录

42

。我可以为参数选择任何名称，这样就可以了

这与第一个示例中的相同：您正在定义一个参数并决定将其命名为

x

。你可以给它取其他名字

第二种情况 在本例中，您正在访问变量

事件

。因为变量不是在函数内部定义的，也不是参数，所以它将在外部范围中查找（闭包基本上就是这样工作的）。现在，

事件

恰好是一个事件

在我们的玩具示例中，这将如何工作？假设

fire

首先将值分配给全局变量：

var globalArg;

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

您可以看到，该值作为回调的参数以及全局变量

globalArg

可用。这就是为什么这两个示例都能工作（对应于您的第一个和第二个示例）