event bubbling, capturing

by yejin_yang

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="outer">
      outer
        <div class="inner">
          inner
        </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

CSS

.outer,
.inner {
  display: block;
  width: 520px;
  padding: 15px;
  margin: 15px;
  text-decoration: none;
}

.outer {
  border: 1px solid red;
  color: red;
}

.inner {
  border: 1px solid purple;
  color: purple;
  width: 400px;
}

JavaScript

const outer = document.getElementsByClassName("outer")[0];
const inner = document.getElementsByClassName("inner")[0];

const capture = {
  capture: true
};
const noneCapture = {
  capture: false
};

outer.addEventListener("click", outerCapture, capture);

inner.addEventListener("click", innerCapture, noneCapture);

outer.addEventListener("click", outerBubble, noneCapture);

inner.addEventListener("click", innerBubble, noneCapture);

function outerCapture(event) {
	console.log('outer, captureing phase');
  console.log(`currentTarget: ${event.currentTarget.className}`);
  console.log(`target: ${event.target.className}`);
}
function innerCapture(event) {
  console.log('inner, captureing phase');
  console.log(`currentTarget: ${event.currentTarget.className}`);
  console.log(`target: ${event.target.className}`);
  
}
function outerBubble(event) {
  console.log('outer, bubbling phase');
  console.log(`currentTarget: ${event.currentTarget.className}`);
  console.log(`target: ${event.target.className}`);
}
function innerBubble(event) {
  console.log('inner, bubbling phase');
  console.log(`currentTarget: ${event.currentTarget.className}`);
  console.log(`target: ${event.target.className}`);
  
}