Difference between Target and currentTarget

currentTarget Target 차이

Difference

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
})

• e.currentTarget -> overlay
• e.target -> modal or overlay