js微任务宏任务执行顺序问题

Question

遇到一个题目，想了半天都没想明白是怎么回事，请各位大佬指点下哦
第一种情况是这样的的，点击click me按钮后，按顺序执行两个注册事件回调函数里面的宏任务，同时遇到微任务就放到微任务队列中，所以结果是这样的：

但是第二种结果，让btn自己调用click()方法，不去手动点击，结果是这样的，为什么呢？手动触发和调用click方法触发回调有什么不同吗？谢谢

Answer 1

与浏览器原生事件不同，原生事件是由DOM派发的，并通过event loop异步调用事件处理程序，而dispatchEvent()则是同步调用事件处理程序。在调用dispatchEvent()后，所有监听该事件的事件处理程序将在代码继续前执行并返回。
https://developer.mozilla.org...