자바스크립트 이벤트 핸들러 this

JavaScript에서 이벤트가 발생하면, 이벤트 핸들러 함수 내부에서 this 키워드를 사용할 수 있습니다. this는 이벤트가 발생한 HTML 요소(element)를 가리킵니다. this를 이용하면, 이벤트 핸들러 함수 내에서 이벤트가 발생한 요소의 속성을 변경하거나, 다른 요소와 상호작용하는 등 다양한 작업을 수행할 수 있습니다.

 

 

사용법

 

예를 들어, 아래 코드는 버튼이 클릭될 때마다 해당 버튼의 텍스트를 변경하는 예시입니다.

 

<button class="btn">Click me</button>
<button class="btn">Click me too</button>

<script>
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
    button.addEventListener('click', function() {
    this.textContent = 'Clicked!';
    });
   });
</script>

 

위 코드에서, querySelectorAll() 함수를 사용하여 버튼 요소를 선택하고, forEach() 함수를 사용하여 각 버튼에 이벤트 리스너를 등록합니다. 그리고 이벤트 핸들러 함수 내에서 this를 사용하여 해당 버튼의 textContent 속성을 변경합니다. 이렇게 하면, 각 버튼이 클릭될 때마다 해당 버튼의 텍스트가 "Clicked!"로 변경됩니다.

 

또한, this를 이용하여 이벤트가 발생한 요소의 속성을 변경하는 것 외에도, 다른 요소와 상호작용하는 등 다양한 작업을 수행할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 다른 요소의 스타일을 변경하거나, 이벤트가 발생한 요소의 부모 요소를 선택하여 작업할 수도 있습니다.

 

this는 자바스크립트에서 매우 유용한 키워드 중 하나입니다. 하지만, this의 동작 방식이 다소 복잡하다는 점에 유의해야 합니다. this는 실행 컨텍스트에 따라 달라지며, 함수를 어떻게 호출하느냐에 따라서도 결과가 달라질 수 있습니다. 따라서, this를 사용할 때는 주의해서 사용해야 합니다.