JavaScript的mousedown、onClick事件与事件队列执行顺序问题

核心原理澄清 #

首先纠正你对UI事件调度的常见认知偏差：

• 事件绑定阶段只是向浏览器注册回调，不会将回调提前加入事件队列，只有对应事件真实被用户交互触发时，浏览器才会将回调包装为宏任务加入事件队列。
• 一次完整的鼠标点击（按下+松开）触发的原生事件顺序是固定的：mousedown → mouseup → click，浏览器会严格按这个顺序将三个事件的回调任务加入宏任务队列，事件循环也会严格按入队顺序执行任务。

正常场景下的执行逻辑 #

你给出的最小示例执行流程是符合规范的：

1. 你点击按钮，浏览器首先生成mousedown事件，将对应回调加入宏任务队列
2. 事件循环取出mousedown回调执行，打印baton，同时完成click事件的绑定
3. 浏览器后续生成mouseup、click事件，依次将对应回调加入队列
4. 事件循环取出click回调执行，打印baton click

你疑惑的「为什么mousedown处理函数会在click事件触发前运行」本质是因为事件队列的先进先出规则：mousedown回调入队早于click回调，自然会先执行，和直觉上的「处理函数要等调用栈清空才运行」并不冲突——mousedown回调执行时，click事件还没被浏览器触发，对应的回调甚至还没入队。

生产环境顺序不一致的原因 #

你观测到的两种执行顺序差异，核心原因是页面初始化阶段的主线程阻塞+框架合成事件机制的叠加影响，基本只会出现在React/Vue这类使用合成事件的SPA场景中：

• SPA导航后场景（正常顺序）：此时页面已经完成初始化，主线程处于空闲状态，用户点击时生成的事件回调会按顺序立即执行，框架的合成事件分发也没有延迟，所以表现为符合规范的顺序。
• 刷新页面后场景（异常顺序）：页面刚刷新时，主线程正在执行大量同步初始化任务（框架实例化、DOM渲染、数据请求回调、资源加载处理等），此时用户点击触发的mousedown、click事件会被浏览器依次生成，但对应的回调任务会排在初始化任务之后等待执行：
  如果你观测的「event」日志是原生事件的触发标记（比如浏览器调试工具的事件打点、根节点捕获阶段的原生事件日志），这些标记是浏览器UI线程独立生成的，不受JS线程阻塞影响，所以会先显示mousedown event、click event已经触发；等主线程清空初始化任务后，才会开始执行事件队列里的回调，此时你就会观测到click event的标记早于mousedown回调的执行时间。
  如果你的业务代码使用了框架合成事件，延迟会更明显：框架会将所有事件委托到根节点统一分发，初始化阶段如果框架的根事件绑定、分发逻辑还没执行完成，或者分发过程有同步阻塞，都会进一步拉大事件触发标记和回调执行的时间差。

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