Synchronous and Asynchronous Events (Ordered and Unordered Events)

Alex Reardon
InstructorAlex Reardon
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

Events are classified as either synchronous or asynchronous (ordered or unordered). This lesson will explore what these categorisations really mean and what it means to you.

Instructor: [0:00] Events are classified as either synchronous or asynchronous. Here, I am showing you the definition of this classification in the UI Events spec.

[0:08] Synchronous events are ordered by the time in which they occurred. For example, user input events, such as mousedown and keyup, are synchronous and will match the same order as the user's input. Synchronous events can also follow predefined event order algorithms. For example, a mousedown event will always come before a mouseup event, which will always come before a click event.

[0:31] Asynchronous events, on the other hand, may be dispatched as the results of the action are completed, with no relation to other events, to other changes in the DOM, nor to the user interaction.

[0:43] A clearer name for this classification would have been ordered and unordered events. Ordered events, or synchronous events, respect some predefined ordering based on time and order algorithms. Unordered events, or asynchronous events, dispatch whenever they want.

[1:01] The synchronous/asynchronous classification does not change how the event interacts with the event loop, the event phases, the event's ability to be stopped or cancelled or how event listeners are executed.

[1:14] You need to be careful not to rely on any relationships between synchronous and asynchronous events. In some cases, you might find a particular asynchronous event happens before an asynchronous event, and sometimes, that order might be different.

[1:27] The UI Events spec calls out one case in particular where you should not rely on any relationship between the asynchronous load event and asynchronous DOMContentLoaded event, as the load event will be fired without any relationship to other events.

[1:44] In order to know if an event is synchronous or asynchronous, you can refer to the event's MDN page. Here for the focus event, we can see that it is synchronous. However, some MDN event reference pages don't say if the event is synchronous or asynchronous such as for the load event.

[2:05] Let's come down to the bottom of the page and we'll go to the relevant spec. We get some more information about the load event here and we can see that it is asynchronous.

~ 27 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today