触发点击事件时有关宏任务和微任务的问题

Question

window.onload = () => {
    var button = window.btn1 = document.querySelector("#btn1");
    button.addEventListener(
        "click",
        () => {
            console.log("task 1");
            Promise.resolve("promise 1").then(console.log);
        },
        false
    );
    button.addEventListener(
        "click",
        () => {
            console.log("task 2");
            Promise.resolve("promise 2").then(console.log);
        },
        false
    );
}

<button id="btn1">handle click event</button>
<button onclick="btn1.click()">run .click()</button>

当我单击按钮时，我认为输出将是：

  

task1，task2，promise1，promise2

但结果是：

  

task1，promise1，task2，promise2

一个事件处理程序将被视为一个宏任务？

另一种方法，如果我通过代码：button.click（）触发click事件，则输出为：

  

task1，task2，promise1，promise2

我知道通过代码触发事件将仅由浏览器的主线程处理。实际点击是不同的。但是，任何人都可以深入地解释它吗？