Event Loop & Microtasks

When the button is clicked, what is the output order?

const button = document.querySelector('button');
button.addEventListener('click', () => {
  Promise.resolve().then(() => console.log('Microtask'));
  console.log('Listener');
});

Microtask, Listener
Listener, Microtask
Event listener execution demonstrates the event loop phases: 1) Event callback is a macrotask and executes synchronously, 2) Console.log('Listener') runs as part of the current macrotask, 3) Promise.then creates a microtask that executes after the current macrotask, 4) Microtasks always execute between macrotasks, 5) This ensures consistent ordering of related operations, 6) Important for managing state updates in response to events.
They execute simultaneously
The order is random

Next Question (8/20)