<div class="outer">
  <div class="inner"></div>
</div>
.outer {
  width: 200px;
  height: 200px;
  background: #42c4ff;
  display: table-cell;
  vertical-align: middle;
}
.inner {
  width: 100px;
  height: 100px;
  background: #3affff;
  margin: 0 auto;
}
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');


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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.