Why event handler callback is getting executed immediately before entire call stack is executed?

Please help in explaining why the click event handler is executed before the script is finished executing.

console.log('Script started running')
document.body.addEventListener('click', () => {
  console.log('Click callback executed')
})
console.log('Before click')
document.body.click()
console.log('After click')

My expectation was

Script started running
Before click
After click
Click callback executed

But the output observed on running is

Script started running
Before click
Click callback executed
After click

Should the script not be executed fully(call stack made empty) before any event callback from the task queue is executed ?