화살표함수를 쓰는 경우

Question

안녕하세요 선생님. 저같은 경우에는 해외에 거주중이고 학교에서는 화살표함수를 위주로 가르치고있어요. 그래서 강의를 보는 동안 화살표 함수를 이용해서 따라하고있었는데, 그렇게되면 (저는 정확히 모르고 구조만 알다보니) 오류가 자주 나더라구요. 이 강의에서도 console.log(this)를 찍는 경우에는 윈도우 자체를 읽는 것 같아요. ( function (){ //이벤트 위임 //ilbuni대신에 stage를 클릭해서 이벤트가 발생하도록 함. const stage = document . querySelector ( '.stage' ); const clickHander = ( e ) => { stage . removeChild ( e . target ); }; stage . addEventListener ( 'click' , clickHander ) })(); 이런 경우에는 여기에서 어떻게 해야 클릭시 stage를 잡아낼 수 있을까요?

1분코딩 · Answer

네 준석님, 말씀대로 화살표함수 내부에서의 this는 window 전역객체를 가리키게 되어있어서, 이벤트핸들러로 활용할 때는 this를 사용하는 것이 불가능합니다.
대신 e.currentTarget을 사용하면, addEventListener 메서드를 호출한 객체(여기서는 stage)를 정확히 잡아낼 수 있습니다.
바로 다음 영상인 "이벤트 위임 보강 영상"을 보시면 target과 currentTarget에 대해 자세히 아실 수 있을거에요!