Something you have to remember is that JavaScript is inherently single threaded -- this means that when you set up an event, or an event is fired (by external situations or by the program itself) it cannot run right then and there. It is added to the execution queue and will not run until the current code snippet has finished running.
It's like a settimeout of zero... no matter how long or how much code you put after that settimeout, it will NEVER run until the control is handed back to the browser from the currently running JavaScript.
<script>
setTimeout(function() { alert('wtf'); }, 0);
for (var t = 1; t < 1000; t++) console.log('waiting');
</script>
If you saved that snippet as your ENTIRE HTML file, No matter how many times you set that to loop for the alert will not fire until AFTER the loop is finished and the markup finishes being parsed and all other scripting has ended.
Whereas you call a function, it runs right then and there.
Events can fire at any time in any order by any trigger, with a function "It's now or never"