JavaScript onMouseDown and onClick events versus event queue

I have following simple JS code (https://stackblitz.com/edit/web-platform-ueq5aq?file=script.js):

const baton = document.querySelector('button');

baton.addEventListener('mousedown', (e) => {
  console.log('baton');
  baton.addEventListener('click', (e) => {
    console.log('baton click');
  });
});

When I click a button, I get 'baton' and 'baton click' logged to console. Now my question is what exactly happens here? As I understand it, the moment script is executed, handler mousedown is added to even queue. When I actually click button, this handler is run, so it's taken from event queue, added to call stack and it is executed. When it is executed, handler "click" is added to event queue.

How actually event onClick is triggered after onMouseDown? How is that related to event queue? Why onMouseDown handler is run before click event happens? I'm asking because I have a lot more complex code where result is different in different scenarios.

When user navigates to page in SPA which contains similiar script, order is:

mousedown event -> handler mousedown -> handler click -> click event

And when user reloads page, so SPA is loaded right on that page, order is:

mousedown event -> click event -> handler mousedown

I am seeking answer and truth. Any help will be greatly appreciated.

from JavaScript onMouseDown and onClick events versus event queue