title: What is the difference in the execution of callback of 'click' event triggered by the user and that triggered programmatically?
body: <p>I was going through an article of Jake Archibald on tasks, microtasks etc. In his example we see that the 'console logs' are printed in certain order for user based click event and different order for click event triggered programmatically. I request if someone could please explain it in a bit more detail about click callback execution in these two cases. </p>
  
  <p><strong>HTML</strong> <br/></p>
  
  <pre><code>&lt;div class="outer-test"&gt;&lt;div class="inner-test"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  <br/></p>
  
  <pre><code>.outer-test {
    background: #D4D4D4;
    padding: 25px;
    width: 92px;
    margin: 0 auto;
  }
  
  .inner-test {
    background: #ADADAD;
    padding: 46px;
    width: 0;
  }
  </code></pre>
  
  <p><strong>JS(First case)</strong>  <br/></p>
  
  <pre><code>var outer = document.querySelector('.outer-test');
  var inner = document.querySelector('.inner-test');
  
  
  new MutationObserver(function() {
    console.log('mutate');
  }).observe(outer, {
    attributes: true
  });
  
  
  function onClick() {
    console.log('click');
  
    setTimeout(function() {
      console.log('timeout');
    },0);
  
    Promise.resolve().then(function() {
      console.log('promise');
    });
  
    outer.setAttribute('data-random', Math.random());
  }
  
  
  inner.addEventListener('click', onClick);
  outer.addEventListener('click', onClick);
  
  
  </code></pre>
  
  <p><strong>JS(Second Case)</strong>  <br/></p>
  
  <pre><code>var outer = document.querySelector('.outer-test');
  var inner = document.querySelector('.inner-test');
  
  
  new MutationObserver(function() {
    console.log('mutate');
  }).observe(outer, {
    attributes: true
  });
  
  
  function onClick() {
    console.log('click');
  
    setTimeout(function() {
      console.log('timeout');
    },0);
  
    Promise.resolve().then(function() {
      console.log('promise');
    });
  
    outer.setAttribute('data-random', Math.random());
  }
  
  
  inner.addEventListener('click', onClick);
  outer.addEventListener('click', onClick);
  
  inner.click();  //&lt;======== 
  </code></pre>
  
  <p>For reference: <a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/" rel="nofollow noreferrer">https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/</a></p>