Why is there a difference in the task/microtask execution order when a button is programmatically clicked vs DOM clicked?

Question

There\'s a difference in the execution order of the microtask/task queues when a button is clicked in the DOM, vs it being programatically clicked.

Answer 1

dispatchEvent

Unlike "native" events, which are fired by the DOM and invoke event handlers asynchronously via the event loop, dispatchEvent invokes event handlers synchronously. All applicable event handlers will execute and return before the code continues on after the call to dispatchEvent.

dispatchEvent is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model. The event can be created using Event constructor.