How to pause and resume event propagation in JavaScript?

Learn how to pause event propagation in JavaScript, resume it, and allow asynchronous tasks to be completed before calling the next event handler.

Sometimes you want to pause and resume executing event handlers. We may describe it that way: while step one isn’t done, step two is unavailable. JavaScript doesn’t have this functionality out of the box, but there is a way to mimic this feature.

How do you pause and resume events in JavaScript?

To mimic a pause and resume a function in JavaScript, we need to stop further propagation of the current event in the capturing and bubbling phases, do the action, and resume propagation on the same element.

It needs to be resumed on the same element because there could be more than one event handler attached to the same element, but we need to prevent calling ourselves to avoid an infinite loop.

To cancel propagation, we’ll use the stopPropagation() method. Note that it does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed.

What challenges do we want to resolve?

The following are challenges we want to resolve:

• Performing asynchronous action like createImageBitmap global function.
• Handle pause and resume event propagation when there are multiple event handlers attached to the same element.
• Additionally, we may want to ensure that our event handler fires before all other event handlers.

Solution

Our proposal:

1. If you want to be sure that your event handler will be called before all other event handlers, then use option capture: true; while attaching an event handler using the addEventListener() method.

   element.addEventListener('click', exampleEventHandler, { capture: true });

2. Use stopPropagation() method at the very beginning of the event handler.
3. Store event phase using property eventPhase from the event (an event that takes place in the DOM). We’ll use that to prevent calling the event handler multiple times for different event phases.
4. Store the event target so we can resume event propagation on the same element later. This is important to resume on the same element because there might be more than one event handler.
5. Once the task is done, resume the propagation by dispatching the same event on the same element.

Real, workable example

While writing the code for image optimization done transparently on input type files, we’re facing the challenge of asynchronous operations. We wanted to pause event propagation until all image optimization was done because there was more than one event handler and we wanted to pass on the list of images already optimized.

See the code that contains pause and resume event propagation and the workable example so you can see it in a real action.