target vs currentTarget

*출처 콥노트

이벤트와 DOM 노드

모든 브라우저 이벤트 핸들러는 콘텍스트(context)에 등록된다. 이벤트 리스너는 해당 이벤트 리스너가 등록된 객체의 콘텍스트에서 해당 이벤트가 발생할 때만 호출된다.
하나의 노드는 단 하나의 onclick 속성만 가질 수 있기에 노드당 하나의 핸들러만 등록할 수 있다. addEventListener 메서드는 여러 핸들러를 등록할 수 있도록 해주며, 요소에 이미 다른 핸들러가 있는 경우라도 핸들러를 안전하게 추가할 수 있다.

전파(propagation)

대부분의 이벤트 유형에서 자식 노드가 있는 노드에 등록된 핸들러는 자식 노드에서 발생하는 이벤트도 수신한다. 단락 안에 있는 버튼을 클릭하면 단락의 이벤트 핸들러에서도 해당 클릭 이벤트를 확인할 수 있다.

이것은 이벤트가 발생한 노드에서부터 해당 노드의 부모 노드와 문서의 루트까지 외부로 전파된다고 말한다. 결국 특정 노드에 등록된 모든 핸들러가 차례로 처리되고 난 후 전체 창에 등록된 핸들러에서 이벤트에 응답할 수 있다.

어느 시점에서든 이벤트 핸들러는 이벤트 객체의 stopPropagation 메서드를 호출해 이벤트 핸들러에서 이벤트를 더 이상 수신하지 못하게 할 수 있다. 예를 들어 클릭 가능한 다른 요소가 포함된 버튼이 있고 해당 버튼을 클릭해 다른 요소의 클릭 동작을 비활성화하고 싶은 경우 사용할 수 있다.

target vs currentTarget

• 대부분의 이벤트 객체에는 객체가 시작된 노드를 참조하는 target 속성이 있다. 이 속성을 사용하면 처리하지 않아야 하는 노드에서 전파된 이벤트를 실수로 처리하는 것을 방지할 수 있다.
• target 속성을 사용해 특정 유형의 이벤트에 대해 넓은 범위로 처리할 수도 있다.
• 긴 버튼 목록을 가진 노드의 경우, 버튼이 클릭됐는지 여부를 알아내기 위해 모든 버튼에 핸들러를 개별적으로 등록하는 대신에, 외부 노드에 하나의 클릭 핸들러를 등록한 다음 target 속성을 사용하는 편이 더 편리하다.

<button>A</button>
<button>B</button>
<button>C</button>

<script>
  document.body.addEventListener("click", event => {
    if(event.target.nodeName === "BUTTON") {
      console.log("clicked", event.target.textContent);
    }
  });
</script>

• 요소를 클릭하면 'click' 이벤트가 요소의 노드 까지 버블링 된다고 한다.

currentTarget

• currentTarget은 이벤트 핸들러가 붙착된 것을 가리킨다. 즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.

결론

• target은 이벤트를 트리거한 요소(예: 사용자가 클릭), currentTarget은 이벤트 리스너가 연결된 요소이다.