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

click

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()

调用click方法的打印结果

listener1

listener2

微任务 1

微任务 2

点击按钮的打印结果

listener1

微任务 1

listener2

微任务 2

为什么会产生这种差异

回答

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

通过JS(dispatchEvent, HTMLElement.click, HTMLElement.focus等)派发的事件的事件处理函数都是同步调用的；

用户触发的事件的事件处理函数都是异步调用的。

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

调用click方法时

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

触发点击事件时

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