eventLoop2.html

<button id="btn1">Predict the future if you want this job</button>
<button id="btn2">Do you want a bonus?</button>
<script>
    function listener1() {
        setTimeout(() => console.log('#1 Hello from timeout 1'), 0)
        Promise.resolve().then(() => console.log('#1 Hello from promise 1'))
        const promise = Promise.resolve()
        setTimeout(() => console.log('#1 Hello from timeout 2'), 0)
        console.log('#1 Hello from main thread')
        setTimeout(() => promise.then(() => console.log('#1 Hello from promise 2')), 0)
    }

    function listener2() {
        setTimeout(() => console.log('#2 Hello from timeout 1'), 0)
        Promise.resolve().then(() => console.log('#2 Hello from promise 1'))
        const promise = Promise.resolve()
        setTimeout(() => console.log('#2 Hello from timeout 2'), 0)
        console.log('#2 Hello from main thread')
        setTimeout(() => promise.then(() => console.log('#2 Hello from promise 2')), 0)
    }

    const btn = document.getElementById('btn1');
    btn.addEventListener('click', listener1, false); // listener1 is callback function of addEventListener function so it will go in callback queue
    btn.addEventListener('click', listener2, false); // listener2 is callback function of addEventListener function so it will go in callback queue

    const btn2 = document.getElementById('btn2');
    btn2.addEventListener('click', () => btn.click(), false);
</script>