자바스크립트에서 이벤트 핸들러를 등록할 때, ‘this’ 키워드는 매우 유용하게 사용됩니다. ‘this’는 현재 실행 중인 객체를 참조하므로, 이벤트가 발생한 요소를 쉽게 참조할 수 있습니다.

보통 ‘addEventListener’ 메소드를 사용하여 이벤트 핸들러를 등록합니다. 이때, ‘addEventListener’ 메소드의 콜백 함수 안에서 ‘this’를 사용하여 현재 요소를 참조할 수 있습니다.

const button = document.querySelector('button');

button.addEventListener('click', function() {
  // 'this'를 사용하여 버튼 요소에 접근
  this.style.backgroundColor = 'red';
});

위의 예시에서는 버튼 요소를 선택하고, 클릭 이벤트가 발생했을 때 배경색을 빨간색으로 변경하는 코드입니다. 콜백 함수 내에서 ‘this’를 사용하여 버튼 요소에 접근하고, ‘style’ 속성을 사용하여 배경색을 변경합니다.

하지만 주의할 점이 있습니다. Arrow 함수를 사용하는 경우, ‘this’는 바깥의 스코프를 가리키기 때문에 이벤트 대상 요소를 참조할 수 없습니다. 따라서 Arrow 함수 대신 일반 함수를 사용해야 합니다.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  // 'this'는 전역 객체(window)를 가리킴
  console.log(this);
});

위의 예시에서는 Arrow 함수를 사용하여 클릭 이벤트 콜백 함수를 등록한 후, ‘this’를 출력해보았습니다. 결과적으로 ‘this’는 전역 객체(window)를 가리키게 됩니다.

이렇게 ‘this’ 키워드를 이용하여 이벤트 핸들러 등록할 때, 현재 요소에 쉽게 접근할 수 있습니다. 잘 활용하여 코드를 간결하게 작성해보세요!

#javascript #이벤트핸들러 #this키워드