Synchronous and Asynchronous Events (Ordered and Unordered Events)

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.