为何addEventListener的回调函数未传event参数也能正常获取事件对象？

这个现象的核心逻辑是回调函数的调用方是浏览器内核，而非开发者手动调用，具体执行流程如下：

• 调用addEventListener注册事件时，你只是把eventHandler的函数引用提交给浏览器的事件管理模块存储，这一步不会执行eventHandler，自然不需要传入任何实参。
• 当页面click事件被触发后，浏览器内核会先完成事件捕获、目标节点匹配、事件冒泡的完整事件流处理，同时会自动生成包含触发源、触发坐标、事件类型等全量信息的Event实例对象。
• 浏览器会遍历当前事件对应的所有已注册回调函数列表，依次主动调用每一个回调函数，调用时默认把生成的Event实例作为第一个实参传入回调。
• 你定义eventHandler时声明的eventObject形参，就是用来接收浏览器主动传入的这个实参的。哪怕你不声明这个形参，参数依然会被传入，直接取arguments[0]也能拿到事件对象，示例如下：

// 没有声明形参也能拿到事件对象
const testHandler = function () {
  console.log(arguments[0]) // 输出完整的click事件对象
}
document.addEventListener('click', testHandler)

简单来说，你只是给浏览器提供了事件触发时要执行的函数规则，触发时机、入参内容都是浏览器事件机制自动处理的，不需要开发者手动调用传参。

内容的提问来源于stack exchange，提问作者Gia Phu Tang