자바스크립트의 this 바인딩 규칙과 DOM 이벤트 호출 방식

addEventListner 에서 콜백을 함수선언문으로 쓰면 왜 콜백함수의 this를 event.target으로 바꿔서 호출함?? 함수 선언문 function handler(e){…} 일반 함수는 호출될 때 this가 호출한 주체에 따라 달라짐 화살표함수 const handler = (e)=>{…} 정적 바인딩이라서 선언당시 This를 그대로 참조

화살표 함수와 익명 함수는 비슷하지만, this 바인딩에 차이가 있다는 사실에 주의해야 합니다. 익명 함수(와 다른 모든 전통적인 JavaScript 함수)는 스스로의 this 바인딩을 생성하지만, 화살표 함수는 자신을 포함하고 있는 함수의 this 바인딩을 상속합니다.

이벤트 수신기 내부의 this 값 비슷한 요소 다수의 이벤트를 모두 처리할 수 있는 범용 수신기를 정의하는 경우, 부착된 요소의 참조를 가져와야 하는 상황이 종종 발생합니다.

addEventListener()를 사용해 요소에 수신기를 부착하게 되면 수신기 내부의 this 값은 대상 요소를 가리키게 되며, 이는 수신기가 매개변수로 받게 되는 이벤트 객체의 currentTarget 속성과 같습니다.

addEventListener에서 일반 함수 호출 const btn = document.querySelector(‘button’);

btn.addEventListener(‘click’, function(e) { console.log(this); // 👈 btn });

브라우저는 이벤트가 발생하면 콜백을 내부적으로 callback.call(target, event)처럼 호출함.

여기서 target은 이벤트가 발생한 요소 (event.target)이고, 그래서 this가 그 요소로 바뀌는 것.

즉, 함수 선언문으로 쓰면 브라우저가 콜백을 DOM 요소에 바인딩해서 호출하기 때문에 this = event.target이 되는 거임.

1. 화살표 함수로 쓰면? btn.addEventListener(‘click’, (e) => { console.log(this); // 👈 상위 스코프 this (보통 window) });

화살표 함수는 this를 새로 바꾸지 않기 때문에 이벤트 타겟이 아님.

정리하면:

일반 함수 → 브라우저가 this = event.target으로 바꿔서 호출

화살표 함수 → 정의된 곳의 this 유지, event.target과 무관

원하면 내가 그림으로 이벤트 발생 → 콜백 호출 → this 바뀌는 과정 보여줄 수도 있음.

이거 그림으로 보고 싶은가?

• https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener