microtask-print3

HTML

<div class="outer">
  <div class="inner"></div>
</div>
<div id="content"></div>

CSS

#content {
  white-space: pre-wrap;
}

JavaScript

(function() {
	var Content = {};
	Content.println = (function(argument) {
		var dom = document.getElementById("content");
		return function(text) {
			var textNode = document.createTextNode(text + "\n");
			dom.appendChild(textNode);
		}
	})();
		var outer = document.querySelector('.outer');
	var inner = document.querySelector('.inner');

	new MutationObserver(function() {
		Content.println('mutate');
	}).observe(outer, {
		attributes: true
	});

	function onClick() {
		Content.println('click');

		setTimeout(function() {
			Content.println('timeout');
		}, 0);

		Promise.resolve().then(function() {
			Content.println('promise');
		});

		outer.setAttribute('data-random', Math.random());
	}

  inner.addEventListener('click', onClick);
  outer.addEventListener('click', onClick);  
 
 

	inner.click();
})();