On this page
  1. How do you pause and resume events in JavaScript?
  2. What challenges do we want to resolve?
  3. Solution
  4. Real, workable example

Struggling with writing tests for accessibility?

You can cut 80% of the time you spend writing tests using SiteLint.

Air bubbles flying up in the water

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.


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.

    Example code with addEventListener and capture option
    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.
Pause and Resume event propagations diagram flow

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.

Related posts


Leave a Reply

SiteLint Audits: Monitoring in real-time Accessibility, Performance, Privacy, Security, SEO, Runtime Errors and Console Logs