Re-fire a javascript event from a stored event object
<p>I have the following:</p>

<pre><code>&lt;textarea id="text"&gt;&lt;/textarea&gt;
&lt;textarea id="simulator"&gt;&lt;/textarea&gt;
&lt;br/&gt;
&lt;div onclick="simulate()"&gt;Simulate&lt;/div&gt;

keyslog = [];
$('#text').bind('keyup keydown keypress mousedown mouseup', function(e){
  keyslog.push(e);
}

function simulate(){
    for(var i=0;i&lt;keyslog.length;i++){
        var e = keyslog[i];
        // how to fire "e" event again on #simulator?
    }
}
</code></pre>

<p><strong>My failed attempts were:</strong></p>

<pre><code>document.getElementById('simulator').dispatchEvent(e);
</code></pre>

<p>And</p>

<pre><code>$('#simulator').trigger(e);
</code></pre>

<p>The question is how to trigger an event based on an already stored event object. It can be a Mouse or Keyboard event.</p>

<p>P.S. The example is about running a playback of pressed keys with the support of cursor changing/highlighting using mouse.</p>
