title: how to correctly implement async event handlers in browser
body: <p>I am struggling with this problem on an older project I have for a while. I also created a <a href="https://github.com/rostacik/asyncEventDemo" rel="nofollow noreferrer">sample repo</a> here but you maybe don't need it.</p>
  
  <p>The problem is, I have more event handlers hooked on same elements or hooked to element up the chain where the event will bubble.</p>
  
  <p>The problem is, that once the code of first handler encounters await (or yield when I build my code with typescript), next handler is fired. How can I synchronize execution to wait until everything in first handler finishes and only then continues to next event handler up the chain?</p>
  
  <p>I saw some samples with "promisification of event emitter", but I am not in control of event object here, since it is created by browser runtime.</p>
  
  <p>Also I have seen some RxJS hints, but could anyone give me a small sample, how he managed to fix the problem?</p>
  
  <p>One small thing - sometimes I also need to await whole execution of another button click that might have chain of its own event handlers.</p>