title: Mouse click vs jquery click vs dispatchEvent click
body: <p>Can someone explain to me why <strong>actual mouse click</strong>
  and <strong>$('div').click()</strong> runs click event 3 times while <strong>$('div')[0].dispatchEvent(new MouseEvent('click'))</strong> runs click event only 1 time according to browser console?</p>
  
  <p>Here's a simple html code:</p>
  
  <pre><code>&lt;div&gt;test&lt;/div&gt;
  </code></pre>
  
  <p>Here's a javascript code:</p>
  
  <pre><code>$('*').click(function(e){
     console.log(e); 
  });
  
  var c = new MouseEvent('click');
  
  // Actual mouse click output event 3 times
  //$('div').click(); // output event 3 times
  $('div')[0].dispatchEvent(c); // output event 1 time
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5uvjwa4t/2/" rel="nofollow">http://jsfiddle.net/5uvjwa4t/2/</a></p>
  
  <p>Thanks</p>