<JavaScript> addEventListener 함수의 콜백 함수

 

🎯

 

addEventListener 메서드

지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

대상으로는 Element, Document, Window 등이 있다.

대상.addEventListener(type, function () {});

type은 반응할 이벤트 유형이다.

주요 이벤트 유형

"click", "focus", "resize", "scroll", "wheel", "mousemove" 등이 있다.

 

addEventListener 함수의 콜백 함수의 this

addEventListener 함수의 콜백 함수에 화살표 함수를 정의하면

화살표 함수 내부의 this가 Window를 가리킨다.

콜백 함수 내에서 대상과 관련한 프로그래밍을 위해 this를 사용할 경우,

funciton 키워드를 사용한 함수를 정의하여야 한다.

const btn = document.querySelector(".btn");

btn.addEventListener("click", () => {
  console.log(this === btn); // => false
  console.log(this === window); // => true
});

< this 가 이벤트 대상을 가리키지 않음 >

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {
  console.log(this === btn); // => true
});

< this 가 이벤트 대상을 가리킴 >

 

📌 참고자료: 포이에마웹(https://poiemaweb.com/es6-arrow-function)

📌 참고자료: MDN(https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener)