<div class="outer">
  <div class="inner"></div>
</div>
body {
  margin: 20px;
  display: flex;
  justify-content: center;
}

.outer {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: #039be5;
}

.inner {
  width: 60px;
  height: 60px;
  margin: 20px;
  background: #7c4dff;
}

// Let's get hold of those elements
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");

// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
  console.log("mutate");
}).observe(outer, {
  attributes: true
});

// Here's a click listener…
function onClick() {
  console.log("click");

  setTimeout(function() {
    console.log("timeout");
  }, 0);

  Promise.resolve().then(function() {
    console.log("promise");
  });

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

// …which we'll attach to both elements
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.