Handle asynchronous execution on one event with multiple event handlers

There is an <input type="file"> HTML element that may have attached 1 or more event handlers. However, when 1 event handler contains an asynchronous code then it stops at it and goes to the next event handler.

Example with window.createImageBitmap usage: https://jsfiddle.net/mxpy5qbw/1/

When method window.createImageBitmap would have the synchronous version that would resolve the issue.

I'm looking for a solution to handle it the way that the first event handler (in JSFiddle example onChangeEvent) will not complete the execution until all work is done, then go to the next event handler.

Also, note onChangeEvent (from the example) is the custom event handler, but other event handlers may come from other places, not necessarily controlled by me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const inputFile = document.getElementById('inputFile');

const handlers = [];

const onChangeEvent = async (event) => {
  let imageBitmap;

  try {
    imageBitmap = await window.createImageBitmap(event.target.files[0]);
  } catch (e) {
    console.error('onChangeEvent', e);
  }

  console.log('onChangeEvent', event, imageBitmap);
};

inputFile.addEventListener('change', async (e)=>{
		await handlers.reduce(async (promise, handler)=>{
    	await promise;
      return handler(e);
    }, Promise.resolve());
}, { capture: true });

handlers.push(onChangeEvent);

const onChangeEventNext = (event) => {
  console.log('onChangeEventNext', event);
};

handlers.push(onChangeEventNext)

<!-- language: lang-html -->

<input type="file" id="inputFile">

<!-- end snippet -->

You can create an array of handlers and attach a common handler to execute the array of async functions one by one using array reduce method and async/await. See the attached snippet.

The final solution is to stop propagation, store event details, execute your task, and dispatch the same event on the same target element. With that in mind, you need to skip your own even handler to avoid an infinite loop. All details are described in the following article:

https://www.sitelint.com/blog/how-to-pause-and-resume-event-propagation-in-javascript/