As my understanding about event loop, event loop will push the callbacks into the callstack, but for example, the following code, the sync code console.log(2) is running after the click event handler, why is that?
console.log(1)
document.body.addEventListener('click', () => {
console.log(3)
})
document.body.click()
console.log(2)By doing :
console.log(1)
document.body.addEventListener('click', () => {
console.log(3)
})
document.body.click()
console.log(2)
The result is :
1
3
2
But by doing :
console.log(1)
document.body.addEventListener('click', () => {
setTimeout( () => {
console.log(3)
},200);
})
document.body.click()
console.log(2)The result is :
1
2
3
So my conclusions are that the click event is well put in the stack, but that it unstacks instantly.