[JS] EventObject currentTarget, target | 이벤트 위임 | event delegation

currentTarget은 EventListener가 등록된 대상이고
target은 Event가 원천적으로 일어난 대상입니다.

개발하며 EventListener를 등록한 후 이벤트를 trigging 하는 과정은 흔하게 사용됩니다.

이 때 Event 인터페이스를 구현한 객체가 argument로 들어오게 되는데요, 이때 우리는 currentTarget 혹은 target을 참조하여 이벤트가 발생한 대상 element를 참조하고 변경을 일으킬 수 있습니다.

이런 두 Property에 대한 차이를 알아보면 아래와 같습니다.

currentTarget: EventListener가 등록되어 있는 element
target: 원천적으로 Event가 발생한 대상

위의 설명으로는 감이 잘 안 오실 수 있습니다. 아래 예제를 살펴보겠습니다.

<button> <span> Button text </span> </button>

DOM visualizing button > span

button tag에 EventListener가 등록되어 있다고 가정하고 button tag안의 span tag를 대상으로 'click' 이벤트를 발생시킬 때의 currentTarget과 target 정보는 아래와 같습니다.

button tag 'Click'

{ target: span element, currentTarget: button element }

이로써 target은 event가 일어난 원천적인 대상이고
currentTarget은 EventListener가 등록되어있는 대상으로 이해를 할 수 있습니다.

위 예제를 생각하여 span tag를 클릭하지 않고 button tag를 클릭하게 되었을 경우 당연하게도 target과 currentTarget모두 같은 button tag로 등록되게 됩니다.

혹은 button > span > span > span > span ... 의 요소를 클릭했을 때에도 원천적으로 Click event가 발생한 element가 target으로 등록되게 됩니다.

이러한 특성을 응용하여 ul > li 형태의 DOM 구조에서 'ul'에 Click EventListener등록 후 'target'을 참조하여 브라우저의 부하를 덜어줄 수 있습니다.

하지만 이런 상황에서도 target이 원천적인 'Event 발생 요소'를 가져옴에 있어 유의해야 합니다.

만약 아래와 같이 DOM구조가 형성이 되어있고, li tag의 dataset 정보를 참조해야 하는 경우에는 추가적인 처리가 필요합니다.

DOM visualizing ul > li > span

왜냐하면 사용자가 li안 span tag(li > span)를 클릭할 때에는 'target'이 'span tag'로 등록되어 'target'을 참조한 dataset 참조가 불가능하기 때문입니다.

이러한 경우에는 target이 내가 원하는 target이 아닐 경우(span tag) 해당 target을 대상으로 closet method를 사용하여 li를 찾아 해당 li의 dataset를 참조하는 방법 등의 어려가지 방법이 있을 수 있다고 생각합니다.
위와 같은 패턴을 '이벤트 위임(Event delegation)'이라고 부릅니다!