DOM Event

DOM 이벤트에서 this 선택하기

이벤트 리스너는 DOM 요소 자체가 필요한지, 바깥 객체 상태가 필요한지에 따라 일반 함수와 화살표 함수를 다르게 고른다.

리스너 작성 흐름

this binding
addEventListener

이벤트 등록

브라우저가 클릭한 DOM 요소와 이벤트 객체를 리스너에 전달한다.

function

요소 this

일반 함수의 this는 기본적으로 이벤트를 받은 요소를 가리킨다.

() =>

바깥 this

화살표 함수는 리스너 바깥 스코프의 this를 그대로 읽는다.

console

디버깅

this와 event.currentTarget을 같이 찍어 실제 대상 차이를 확인한다.

event listener this DOM log
정리

DOM 요소를 직접 다루는 코드라면 일반 함수가 자연스럽고, 클래스나 모듈의 상태를 유지해야 하면 화살표 함수가 더 예측 가능하다.