Asynchronous or Synchronous calling of event handlers in javascript

Question

Are event handlers executed synchronously or asynchronously in JavaScript? Here is JS bin which is showing that event handler is executed synchronously.

Code:

$('#toclick').bind('custom', function() {
    for (var i=0; i<100000; i++) {}
    console.log('Inside click handler');
});

$('#toclick').trigger('custom');
console.log('Outside click handler');

Output:

Inside click handler
Outside click handler

This means if we trigger an event, the code below it won't be executed unless all the event handlers are executed. Am I right ?

Bin with multiple event handlers

Answer 1

That's correct. All event handlers are fired synchronously and in order of binding.

Answer 2

Some event handlers are executed synchonously and others asynchronously. See DOM-Level-3-Events