title: How to clone or re-dispatch DOM events?
body: <p>I'm looking for a simple and abstract way of cloning or re-dispatching DOM events only. I am not interested in cloning DOM nodes. </p>
  
  <p>I've experimented a bit, read the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html" rel="noreferrer">DOM Events specification</a> and I found no clear answer.</p>
  
  <p>Ideally, I'm looking for something as straight-forward as:</p>
  
  <pre><code>handler = function(e){
    document.getElementById("decoy").dispatchEvent(e)
  }
  document.getElementById("source").addEventListener("click", handler)
  </code></pre>
  
  <p>This code example, of course, does not work. There's a DOM exception stating that the event is currently being dispatched - obviously.</p>
  
  <p>I'd like to avoid manually creating new events with <code>document.createEvent()</code>, initializing them and dispatching them. </p>
  
  <p>Is there a simple solution to this use case?</p>