为什么javascript的handleEvent方法可以访问省略事件参数的事件？

Question

根据MDN doc handleEvent方法，event它具有单个参数，但是这个例子是：

代码笔

html代码：

<button id="btn">Click here!</button>  

JavaScript 代码：

const buttonElement = document.getElementById('btn');

buttonElement.addEventListener('click', function () {
  alert(event.type);
});

回调handleEvent函数没有参数，但可以访问事件（它提醒“点击”）。

它是如何工作的？

是否有任何参考文献明确指出event可以省略参数？

Answer 1

在 JavaScript 中，当你引用一个变量时，它会首先在局部作用域中查找，然后再检查全局作用域。在浏览器中，所有全局范围的变量都是window对象的属性。查找window.event会产生以下文章： https: //developer.mozilla.org/en-US/docs/Web/API/Window/event。尤其：

只读Window属性事件返回Event站点代码当前正在处理的事件。在事件处理程序的上下文之外，该值始终为undefined。

这意味着每当您当前正在处理事件时，浏览器也会将该事件绑定到全局范围。

应该指出的是，正如文章中提到的，实际上利用这一点是一个坏主意。该值并不总是您所期望的，并且通常不建议使用全局变量。

至于你的第二个问题：只要你不打算在处理中使用它，任何回调函数的任何参数都可以省略，如果你确实包含它，你可以将其命名为你喜欢的名称。在这种情况下，恰好有一个全局变量与该参数常用的名称具有相同的名称。例外情况是您必须定义所有先前的参数才能访问后面的参数。

一些例子：

// This is OK - you don't have to call the passed event "event"
buttonElement.addEventListener('click', function (ev) {
  alert(ev.type);
});

// This is not OK - the global variable is named "event" so "ev" in this case is undefined
buttonElement.addEventListener('click', function () {
  alert(ev.type);
});

// This is OK but not preferred because it uses the global "event" variable
buttonElement.addEventListener('click', function () {
  alert(event.type);
});

// This is fine - `event` overrides (shadows) the global variable so the local reference gets used
buttonElement.addEventListener('click', function (event) {
  alert(event.type);
});

// This the same as the preceding example
buttonElement.addEventListener('click', function () {
  alert(window.event.type);
});