<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.