event对象的本质是什么？其底层技术工作机制是怎样的？

1. 每个事件对应独立的Event实例，不存在全局唯一的存储所有事件的对象 #

浏览器触发任何事件时，都会在内存中创建一个全新的事件对象实例（属于Event接口或其子类，比如MouseEvent/KeyboardEvent），这个实例只存储当前这一次事件的所有上下文信息，和其他事件的实例完全隔离，互不影响。
你平时能直接访问的event本质是window.event，这是IE早期遗留的非标准设计：它只是一个临时指针，永远指向当前正在分发执行的事件对应的实例，新事件触发时这个指针就会被覆盖，并不是存储了所有事件的全局对象。

2. 不能任意位置访问、修改Event对象 #

你能访问到event的前提只有两个：

• 当前处于某一事件的同步分发阶段，window.event临时指向该事件的实例
• 你主动持有了某个事件实例的引用（比如通过处理函数参数拿到）

如果脱离以上场景，在没有事件触发时直接访问event会得到undefined，异步回调（比如setTimeout、接口请求回调）执行时如果事件已经分发完毕，window.event要么指向其他新触发的事件实例，要么为空。
修改规则也有明确限制：只有cancelBubble、returnValue这类可写属性允许修改，type、target、timeStamp这类内置只读属性底层设置了不可写标识，强行赋值不会生效。

3. 事件处理函数传参是标准兼容设计，比全局event更可靠 #

W3C标准规定，事件触发时必须把当前事件的实例作为第一个参数传入所有注册的事件处理函数，这个设计解决了两个核心问题：

• 兼容性：老IE只支持window.event，现代浏览器同时支持参数和全局window.event，统一用参数可以规避跨浏览器差异
• 稳定性：参数指向的事件实例不会被后续触发的事件覆盖，哪怕你在异步逻辑里通过闭包引用这个参数，永远能拿到当前事件的完整信息，不会出现全局event被覆盖导致的逻辑错误

可参考以下示例直观感受差异：

document.addEventListener('click', (e) => {
  // 同步逻辑下两者一致
  console.log(e.type === event.type); // 输出 true

  setTimeout(() => {
    // 1s后如果触发了其他事件，全局event已经被覆盖
    console.log(e.type); // 稳定输出 click
    console.log(event?.type); // 可能输出 scroll、keydown等其他事件类型，也可能为undefined
  }, 1000);
})

行业规范永远推荐优先使用处理函数参数传入的事件对象，不要依赖全局window.event。

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