在addEventListener方法中，将参数x传递给实现console.log(x)的匿名函数如何返回事件？ 设置第一个场景第二种情况第三种情况

如何解决在addEventListener方法中，将参数x传递给实现console.log(x)的匿名函数如何返回事件？ 设置第一个场景第二种情况第三种情况

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

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

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, …}
});

解决方法

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

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

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

,

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

设置

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

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 是一个变量，既不在函数内部定义，也不是参数。所以在外部环境中查找变量。但是，它也不存在，因此会引发错误。