this 와 currentTarget이 원하는대로 동작하지 않습니다!

Question

const wrapElem = document.querySelector(".wrap");

wrapElem.addEventListener("click", e => {

 console.log(this);

});

이렇게 작성을하고 .wrap (wrap은 width:100vw; height:100vh;)을

클릭하면 .wrap에 대한 요소가 콘솔창에 나타나지 않고 

Window {parent: Window, opener: null, top: Window,

length: 0, frames: Window, …}

이렇게 나타납니다. e.currentTarget으로 해도 마찬가지입니다.

왜 저는 this가 제대로 동작을 안할까요 ㅠㅠ?

* e.target으로 하면 원하는대로 동작 합니다.

Answer

아- 원래 화살표함수에서의 this는 function 함수랑 다르게 동작하거든요~
https://poiemaweb.com/es6-arrow-function
이 페이지에 정리가 잘 되어있는데,
여기서 3.this 파트를 한번 살펴보세요~