点击鼠标和主动调用click方法有什么不同，为什么有下面这种现象。

Question

<button id="btn">click</button>
<script>
 var oBtn = document.getElementById('btn')
    oBtn.addEventListener('click', function () {
        Promise.resolve().then(() => console.log('微任务 1'))
        console.log('listener1')
    })
    oBtn.addEventListener('click', function () {
        Promise.resolve().then(() => console.log('微任务 2'))
        console.log('listener2')
    })
    oBtn.click()
</script>

调用click方法的打印结果
listener1
listener2
微任务 1
微任务 2

点击按钮的打印结果
listener1
微任务 1
listener2
微任务 2

为什么会产生这种差异

Answer 1

1. 通过JS（dispatchEvent, HTMLElement.click, HTMLElement.focus等）派发的事件的事件处理函数都是同步调用的；
2. 用户触发的事件的事件处理函数都是异步调用的。