Why do functions from event queue aren't called even when main executions stack is empty?

Question

I was reading an article on event queue.

And the authour say " funcitons from event queue aren't executed until they find the main execution stack empty "

and to demonstrate the same he provide the following example

function documentClickHandler() {
  console.log('CLICK!!!');
}

document.addEventListener('click', documentClickHandler);

function a() {
  const fiveSecondsLater = new Date().getTime() + 5000;
  while (new Date().getTime() < fiveSecondsLater) {}
}

a();

Click here!

So, in this case, the documentClickHandler goes into the event queue. and the function documentClickHandler will not be executed unitil main execution stack is empty . In this case until the function a finishes its work the documentClickHandler will not be executed . right !.

But that's not working the way it is indented to .....
i think it doesn't even listens to clicks and is that due to heavy work done by function a.

i) Can you provide me any other example that explains the same, the example that can prove that event queue functions aren't executed until the execution stack is empty ?

ii) Why the example is not working! I have clicked the window at the time when function a is executing and the documentClickHandler doesn't even show it work when funciton a has done its work !