<p>두 영역을 클릭해보세요.</p>
<div class="parent">
  <div class="child"></div>
</div>

<div class="print1"></div>
<div class="print2"></div>
* {
  box-sizing: border-box;
}

.parent {
  width: 400px;
  height: 120px;
  padding: 30px;
  background: skyblue;
}

.child {
  width: 100%;
  height: 100%;
  background: pink;
}
const $parent = document.querySelector('.parent');
const $child = document.querySelector('.child');
const $print1 = document.querySelector('.print1');
const $print2 = document.querySelector('.print2');


const clickHandler = (event) => {
  let target = event.target.className;
  let current = event.currentTarget.className;
  
  $print1.innerHTML = `현재target: ${target}`; 
  $print2.innerHTML = `현재currentTarget: ${current}`; 
}


$parent.addEventListener("click", (e) => {
  clickHandler(e);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.