Приоритет в асинхронном коде, как это работает?

Question

[narem]

let button = document.querySelector('.one')

button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 1'));
        console.log('Listener 1');
});
button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 2'));
        console.log('Listener 2');
});
button.click();

Если просто запустить этот код, то событие вызовет button.click() и вывод в консоль будет

"Listener 1"
"Listener 2"
"Resolve promise 1"
"Resolve promise 2"

А если вызвать через клик то будет

"Listener 1"
"Resolve promise 1"
"Listener 2"
"Resolve promise 2"

Не могу понять почему такая разница в срабатывание, подскажите плз.

Answer 1

[Alexandroppolus]

1) Просто вызов: оба хендлера последовательно запускаются в одном и том же синхронном коде (в текущем таске), ставят в очередь 2 микротаска.

2) Через клик: на каждый хендлер создается отдельный таск в event-loop, таски отрабатывают по очереди, каждый из тасков создает по одному микротаску, последний выполняется до перехода управления к след. таску.