This is a picture how event loop works.

eventLoop.js

document.addEventListener("click", () => {
    setTimeout(() =>{
        Promise.resolve(13).then((value) => console.log(value));
        console.log("click1");
    })
})
document.addEventListener("click", () => {
    setTimeout(() =>{
        Promise.resolve(17).then((value) => console.log(value));
        console.log("click2");
    })
})
/////////////////////////////
/// Info about Event Loop ///
/////////////////////////////

/// Event Loop has 3 stacks for reading, these are Global stack, Micro Stack, Macro Stack
/// Let's imagine how it will work with these 3 stacks
/* 
    {
        global: ["Task 1", "Task 2", "Task 3"],
        micro: ["Task 1", "Task 2", "Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
*/
/// For the first tasks will be reading from Global stack, and you will see next picture
/*
    Step 1
    {
        global: ["Task 2", "Task 3"],
        micro: ["Task 1", "Task 2", "Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
    Step 2
    {
        global: ["Task 3"],
        micro: ["Task 1", "Task 2", "Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
    Step 3
    {
        global: [],
        micro: ["Task 1", "Task 2", "Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
*/
/// Now we are at the end of the Global stack, so what is next?
/// Next programm will look at Micro stack, and it will read same as it read Global stack, no differences

/*
    Step 1
    {
        global: [],
        micro: ["Task 2", "Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
    Step 2
    {
        global: [],
        micro: ["Task 3"],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
    Step 3
    {
        global: [],
        micro: [],
        macro: ["Task 1", "Task 2", "Task 3"]
    }
*/
/// Well now see that we don't have any Micro tasks, and it ain't bad, so what is next you could ask?
/// Next step has no differences among before 2 steps
/*
    Step 1
    {
        global: [],
        micro: [],
        macro: ["Task 2", "Task 3"]
    }
    Step 2
    {
        global: [],
        micro: [],
        macro: ["Task 3"]
    }
    Step 3
    {
        global: [],
        micro: [],
        macro: []
    }
*/
/// Now we dont have any tasks anymore, but they may come from events as example, and Event Loop will try to complete them
/// At last, examples of tasks:
/// Global: all code of script
/// Micro: Promise.resolve().then(f1); want to emphasize what "f1" will be micro not the result of evaluation "Promise.resolve().then(f1)"
/// Macro: setTimeout
/// P.S You can search another examples of tasks in the internet :)

///////////////////////////////
/// Approximately execution ///
///////////////////////////////

/// Programm has been started to read

/// Main thread: Listener is added; reading Global stack
/// Main thread: Listener is added; reading Global stack
/// Main thread: Stack is clear, no more code here (Global stack)

/// One day click's event is occurred

/// Main thread sees that he has got Macro tasks in Macro stack, it starts to complete tasks from Macro stack
/// We are into Macro ===>
/// Main thread: Processing first setTimeout (MacroTask)
/// Main thread: Promise code has been read, MicroTask is added to Micro stack
/// Main thread: console.log code has been read
/// Logs: click1
/// Main thread sees that current Macro task has came to end and in the same time it see that Micro stack is not empty, it starts to complete tasks from Micro stack
/// We are into Micro ===>
/// Main thread: tries to complete code in then first arg function (MicroTask)
/// Logs: 13
/// Main thread: Stack is clear, no more code here (Micro stack), but we have one more task in Macro stack, and main thread goes to complete it

/// We are into Macro ===>
/// Main thread: Processing second setTimeout (MacroTask)
/// Main thread: Promise code has been read, MicroTask is added to Micro stack
/// Main thread: console.log code has been read
/// Logs: click2
/// Main thread sees that current Macro task has came to end and in the same time it see that Micro stack is not empty, it starts to complete tasks from Micro stack
/// We are into Micro ===>
/// Main thread: tries to complete code in then first arg function (MicroTask)
/// Logs: 17
/// Main thread: Stack is clear, no more code here (Micro stack)
/// All stacks are empty, now Main thread awaits new tasks in stacks