JavaScript中addEventListener的event参数是否可选？两段代码为何效果一致？

1. 先给结论：event参数不是必须声明，但标准里浏览器必传该参数 #

浏览器触发事件时，一定会把事件对象作为第一个参数传给处理函数，但你可以选择在函数里不声明这个参数变量——这和“可选参数”不是一个概念，标准中事件处理函数的第一个参数就是事件对象，只是你可以不用变量接住它。

2. 两段代码效果相同的原因 #

第一段代码没写event参数却能输出坐标，是因为非严格模式下，浏览器会把事件对象挂到全局的window.event上——这是早年IE的遗留特性，现在主流浏览器为了兼容老代码都保留了。你直接写event的时候，其实是在访问全局的window.event。

但这种写法有明显坑点：

• 开启严格模式会直接报错，因为严格模式不允许使用未声明的变量。
• 如果是嵌套函数、异步场景中使用，全局event可能被后续触发的事件覆盖，拿到的就不是当前事件的对象了。

3. 哪种写法更值得采用？ #

肯定优先选第二段代码，也就是显式声明event参数的写法，原因如下：

• 符合标准：事件对象作为参数传递是DOM规范的标准行为，window.event只是兼容老代码的非标准特性，虽然短期不会被移除，但标准写法更稳定可靠。
• 代码更健壮：不依赖全局变量，在严格模式、复杂业务场景下都不会出问题。
• 可读性更强：别人一看函数参数就知道这是事件处理函数，要用到事件对象，不用猜你是在调用全局变量。

举个反例，严格模式下第一段代码直接报错：

'use strict';
document.addEventListener('click', function(){
    console.log(event.pageX, event.pageY); // 报错：ReferenceError: event is not defined
});

而第二段代码在严格模式下完全正常：

'use strict';
document.addEventListener('click', function(event){
    console.log(event.pageX, event.pageY); // 正常输出坐标
});

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