microtask-print2

HTML

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

CSS

.outer {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: #8c8c8c;
}
.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:1;
  background-color: #4e4e4e;
}
#content {
  white-space: pre-wrap;
  min-height: 50px;
  margin-top: 10px;
  border: 1px solid gray;
}

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);
})();