이벤트 리스너 & this

Concept

이벤트 리스너 안에 this는 이벤트 리스너를 추가한 element를 가르킨다.
중요
해당 element의 자식 element를 클릭해도 이벤트 리스너를 추가한 element를 가진다.
this와 event 객체의 currentTarget과 같은 값을 가지고 있다.
자식 element를 선택하고 싶으면 event 객체에서 target 속성을 이용한다.

Example

const ele = document.getElementId('box')
ele.addEventListener('click', function (e) {
      console.log('e', this) //ele === this
      console.log('e', e.currentTarget) //ele === e.currentTarget
      console.log('e', e.target) //ele === e.target || ele 의 자식 element === e.target
}

Important

개발하다보면 목록요소들에 대해 이벤트 리스너를 추가해야할 때가 있다.
각 요소마다 추가하는것이 아니라, 상위 요소에 한번만 추가하여 하위요소들의 이벤트를 추가할 수 있게 해야한다.
이유는 이벤트 리스너를 많이 추가할 수록 이벤트 리스터가 메모리를 더 많이 점유하기 때문에 웹 성능이 하락한다.
이런 기술을 이벤트 위임이라고 하는데, 아래의 페이지에서 실무할 때 어떻게 하는지 알아보자
[JS] 이벤트 위임