<section>
  section
  <ul>
    ul
    <li>
      li
      <p>P태그 입니다. : 여기를 눌러보세요</p>
    </li>
  </ul>
</section>
* {
  box-sizing: border-box;
  color: #fff;
}
ul {
  list-style: none;
}

section {
  padding: 30px;
  background: #2A3882;
}

ul {
  padding: 30px;
  background: #6D3AA0;
}

li {
  padding: 30px;
  background: #B6A930;
}

p {
  padding: 30px;
  background: #9B5031;
  color: #000;
}

.clicked {
  background: red !important;
}
const everyNodes = document.querySelectorAll("*")

for(let nodeItem of everyNodes){
  nodeItem.addEventListener("click", e => alert(`캡쳐링 입니다. ${nodeItem.tagName}`), true)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.