currentTarget Target 차이

currentTarget Target 차이

Difference

Property	Click the inner square	Click outside of the inner square
currentTarget	Outer square	Outer square
target	Inner square	Outer square

currentTarget

이벤트가 바인딩 된 요소

the element that the event was bound to. It never changes. In the sample code above, e.currentTarget is the element.

target

사용자가 클릭 한 요소

사용자가 정확히 클릭하는 위치에 따라 원래 요소 또는 하위 요소가 될 수 있다.

the element user clicked on, in the case of click event. It can be the original element or any of its children depending on where user clicks on exactly.

Sample

<!-- Overlay -->
<div id="overlay">
  <!-- Modal content -->
  <div id="modal">
    ...
  </div>
</div>

element.addEventListener("click", function(e) {
  // `currentTarget` and `target` are `e`'s properties
})