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

all events are synchronous. You might also like to a look into event propagation quirksmode.org/js/events_order.html — Ejaz
– Ejaz, Commented Apr 10, 2013 at 11:06

BobRodes · Accepted Answer · 2022-09-21 23:54:08Z

23

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

edited Sep 21, 2022 at 23:54

BobRodes

6,1852 gold badges28 silver badges29 bronze badges

answered Apr 10, 2013 at 11:03

freakish

57k12 gold badges141 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xianshenglu Over a year ago

what do you think about the Some event handlers are executed synchonously and others asynchronously.?

freakish Over a year ago

@xianshenglu there's a confusion. Once an event is triggered all handlers bound to it run synchronously. But events (e.g. load) can be triggered asynchronously. So handlers are always synchronous. While events themselves need not. Note that trigger function triggers an event synchronously.

Dimitris Zorbas · Accepted Answer · 2013-07-01 15:56:51Z

11

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

answered Jul 1, 2013 at 15:56

Dimitris Zorbas

5,4903 gold badges30 silver badges33 bronze badges

1 Comment

Charles Harris Over a year ago

The document outlines the events are fired either synchronously or asynchronously, but it doesn't specify whether the handlers themselves are executed synchronously. In my experience, once the event is dispatched, the handlers are executed synchronously in order of DOM binding, as specified above.

Collectives™ on Stack Overflow

Asynchronous or Synchronous calling of event handlers in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related