点击鼠标和主动调用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. 用户触发的事件的事件处理函数都是异步调用的。

Answer 2

https://jakearchibald.com/201...

一篇关于任务、微任务的文章

Answer 3

基于你给的案例的个人猜想：

调用click方法时

创建了一个宏任务，同时触发了两个回调函数，并在此宏任务中执行了回调里的两个微任务。

触发点击事件时

创建了两个宏任务，第一个宏任务中的回调和微任务执行完了之后再执行第二个宏任务。