onclick this

JavaScript에서 onclick은 HTML 요소를 클릭할 때 실행되는 이벤트 핸들러를 정의하는 속성이다.

onclick 속성에 할당된 값은 클릭 이벤트가 발생했을 때 호출되는 JavaScript 함수이다.

 

이벤트 핸들러 함수 내부에서 this 키워드는 현재 이벤트가 발생한 HTML 요소를 가리킨다.

이렇게 this를 사용하면 클릭된 요소에 접근하고 해당 요소에 대한 작업을 수행할 수 있다.

 

예를 들어, 아래의 HTML 코드는 버튼을 클릭했을 때 changeColor 함수를 호출하는 버튼 요소를 가지고 있다.

<button onclick="changeColor()">클릭</button>

 

JavaScript 함수 changeColor를 다음과 같이 정의하고, this를 사용하여 버튼의 스타일을 변경하는 예제를 살펴보았다.

 

function changeColor() {
  this.style.backgroundColor = "red";
}

 

위의 코드에서 this는 changeColor 함수가 호출된 버튼 요소를 가리킨다.

style 속성을 사용하여 버튼의 배경색을 "red"로 변경할 수 있다.

여기에 더 나아가서, 함수를 직접 바인딩하지 않고 이벤트 핸들러로 익명 함수를 사용할 수도 있다.

이 경우 this는 이벤트를 발생시킨 요소를 가리킨다.

<button onclick="function() { this.style.backgroundColor = 'red'; }">클릭</button>

위의 예제에서도 this는 버튼을 가리키고, 클릭 시 배경색이 "red"로 변경된다.

this는 JavaScript에서 매우 유용한 키워드이며, 다른 이벤트 핸들러에서도 사용할 수 있다.

이를 통해 이벤트가 발생한 요소에 동적으로 접근하고 조작할 수 있다.