onfocusin与onfocusout事件触发顺序确定性技术问询

一、焦点切换场景的具体结果 #

当焦点从elm_1切换至elm_2时，elm_1的focusout事件会先触发，随后才是elm_2的focusin事件。因此变量x最终会等于2——focusout先将x设为1，紧接着focusin会把x覆盖为2。

这个顺序是W3C DOM Events规范明确规定的：焦点转移流程中，失焦元素的blur/focusout事件触发优先级高于得焦元素的focus/focusin事件，所有浏览器都会遵循这个标准。

二、如何100%确定事件执行顺序 #

要精准判断任意场景下的事件执行先后，核心是依赖官方DOM规范的明确定义，而非经验性的浏览器表现，具体可以从以下几个维度着手：

1. 掌握规范定义的事件优先级 #

对于同步触发的用户交互事件，规范会明确规定执行顺序：

• 焦点转移：失焦元素的blur/focusout → 得焦元素的focus/focusin
• 表单提交：点击提交按钮时，按钮的click → 表单的submit；键盘触发提交时，表单的keydown → keyup → submit
• 鼠标交互：mousedown → mouseup → click

2. 区分同步事件与异步事件 #

• 同步事件：如click、focus、input等，会在同一事件循环的宏任务中按规范顺序执行，优先级最高。
• 异步事件：如setTimeout、requestAnimationFrame、Promise回调等，会进入任务队列，等所有同步任务执行完毕后才会按入队顺序执行，优先级低于同步事件。

3. 明确事件的捕获与冒泡阶段顺序 #

同一元素的同一事件，监听函数的执行顺序由绑定阶段决定：

• 捕获阶段（绑定addEventListener时设置useCapture: true）的监听先执行
• 目标元素自身的监听函数，按绑定的先后顺序执行
• 最后执行冒泡阶段（默认useCapture: false）的监听函数

4. 用调试工具辅助验证 #

如果对某个场景的顺序存疑，可以在事件回调中打印event.eventPhase：

• 1：当前处于捕获阶段
• 2：当前处于目标元素阶段
• 3：当前处于冒泡阶段
  通过这个属性可以明确事件所处的流程节点，辅助验证顺序是否符合预期。

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