事件监听器与MutationObserver回调的执行顺序是否有明确规则？

首先，你的观察和部分猜测是正确的，我们来一步步拆解问题，明确规范里的执行顺序规则：

一、核心规则：宏任务与微任务的执行优先级 #

根据浏览器事件循环的规范：

• 事件监听器的回调属于宏任务（Task），会被放入宏任务队列等待执行；
• MutationObserver的回调属于微任务（Microtask），会被放入微任务队列。

事件循环的执行逻辑是固定的：

1. 执行当前宏任务队列中的第一个任务；
2. 清空所有微任务队列中的任务（按顺序执行）；
3. 重复上述步骤，直到所有队列处理完毕。

简单来说，微任务会在每一个宏任务执行完成后立即执行，绝对不会等到下一个宏任务之后才处理。

二、验证你的两种场景 #

场景1：事件监听器绑定在input元素上 #

你的代码：

['input', 'keydown'].forEach(eventName => { 
  document.getElementById('my-input').addEventListener(eventName, e => { 
    console.log(`${eventName} event is handled`); 
  }) 
})

执行流程：

1. 用户按下键盘，首先触发input元素的keydown事件，对应的回调作为宏任务1执行，输出keydown event is handled；
2. 宏任务1执行完毕，此时input的value还未改变，没有DOM变更，微任务队列为空；
3. 浏览器处理键盘输入，将字符插入input，value更新触发DOM变化，MutationObserver的回调被加入微任务队列；
4. 接着触发input元素的input事件，对应的回调作为宏任务2执行，输出input event is handled；
5. 宏任务2执行完毕，处理微任务队列，执行MutationObserver回调，输出Handled mutation records: ...。

你的结论完全正确：这两个元素级的事件回调会按顺序作为宏任务执行，之后才处理MutationObserver的微任务。

场景2：事件监听器绑定在document上 #

你的代码：

['input', 'keydown'].forEach(eventName => { 
  document.addEventListener(eventName, e => { 
    console.log(`${eventName} event is handled`); 
  }) 
})

执行流程：

1. 用户按下键盘，keydown事件从input冒泡到document，document的keydown回调作为宏任务1执行，输出keydown event is handled；
2. 宏任务1执行完毕，此时浏览器处理键盘输入，将字符插入input，value更新触发DOM变化，MutationObserver的回调被加入微任务队列；
3. 处理微任务队列，执行MutationObserver回调，输出Handled mutation records: ...；
4. 接着input事件从input冒泡到document，document的input回调作为宏任务2执行，输出input event is handled。

这里的关键是：keydown事件的触发早于DOM值的更新，而input事件的触发晚于DOM值的更新。当keydown的宏任务执行完后，DOM发生变化，MutationObserver的微任务被加入队列，此时浏览器会先清空微任务，再执行下一个宏任务（input的回调），所以出现了你看到的顺序。

你疑惑为什么不是MutationObserver → keydown → input，原因很简单：keydown事件是在DOM变化之前就触发的，它的宏任务会先被执行，MutationObserver的回调要等到DOM实际变化后才会被加入微任务队列，自然不会先于keydown回调执行。

三、关于执行顺序的可靠性 #

这个执行顺序是完全可靠且有明确规范依据的，只要浏览器遵循HTML和ECMAScript的事件循环规范，就不会出现顺序变化。宏任务与微任务的优先级规则是浏览器事件循环的核心机制之一，所有现代浏览器都严格遵循这一规则。

另外需要明确：MutationObserver并不存在类似事件冒泡的机制，它是监听DOM树的变化，一旦检测到符合条件的变更，就会将回调加入微任务队列，等待当前宏任务执行完毕后立即执行。

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