事件处理函数未显式传参却获取event对象的原理与疑问

我了解内联事件处理程序会自动接收event变量，示例如下：

<button onClick='someFunction(event);'>Act</button>

但通过addEventListener绑定的事件处理函数，为什么也能自动在作用域中获取event对象？示例代码如下：

<!DOCTYPE html>
<html>
  <body>
    <button id="print-btn">Print</button>

    <script>
        (function(){
            const printBtn = document.querySelector('#print-btn');
            printBtn.addEventListener('click', displayMessage);
            
            function displayMessage(){
                console.log(event); // 输出了我们没有传递的PointerEvent!
            }
        })();
    </script>
  </body>
</html>

更奇怪的是，事件处理函数调用的其他函数也能访问该event对象：

const printBtn = document.querySelector('#print-btn');
printBtn.addEventListener('click', displayMessage);

function displayMessage(){
    console.log("Display", event); // 输出了我们没有传递的PointerEvent!
    doOtherStuff();
}

function doOtherStuff(){
    console.log("Other stuff", event); // 这个函数居然也能拿到!
}

我的疑问如下：

1. 这种现象的原理是什么？
2. 该场景下event对象的作用域是什么？是否为window？
3. 除该场景外，还有哪些类似的隐式参数传递情况？

问题解答 #

1. 这种现象的原理是什么？

这是浏览器为兼容早期IE遗留代码而保留的非标准行为。

在早期IE浏览器中，事件处理函数不会自动接收事件对象作为参数，而是需要通过全局的window.event来获取。现代浏览器为了让老旧代码仍能正常运行，保留了这个特性：当事件触发时，浏览器会将当前的事件对象挂载到window对象上，所以即使你没有在事件处理函数中显式声明参数，也能通过全局的event变量访问到它。

不过需要注意，标准的事件处理方式是在函数中显式接收event参数，比如：

function displayMessage(event) {
    console.log(event); // 这是符合规范的写法
}

这种显式接收的方式才是W3C标准定义的行为，全局event只是兼容遗留代码的产物，不推荐在新代码中使用。

2. 该场景下event对象的作用域是什么？是否为window？

是的，这个event就是window对象的属性，属于全局作用域。

你可以通过以下代码验证：

function displayMessage() {
    console.log(window.event === event); // 输出true
}

正因为它是全局属性，所以不管是在事件处理函数本身，还是该函数调用的其他嵌套/外部函数中，只要没有局部变量event覆盖它，访问到的都是同一个window.event对象。

3. 除该场景外，还有哪些类似的隐式参数传递情况？

这类隐式传递基本都是浏览器为兼容旧代码保留的遗留行为，常见的有：

• 早期IE的attachEvent方法绑定事件时，依赖window.event获取事件对象（该方法现已废弃）；
• 早期的window.onerror事件，部分浏览器会隐式在全局暴露错误相关属性（现在标准的onerror会接收message、source、lineno等参数）；
• 一些老版本浏览器中，处理键盘/鼠标事件时，会隐式提供keyCode、clientX等全局属性（现在都推荐通过标准事件参数获取这些值）。

内容的提问来源于stack exchange，提问作者Emmanuel