JavaScript 이벤트 등록 방법: this 키워드로 요소 속성 조작하기

JavaScript에서 이벤트 핸들러 등록하기

JavaScript 코드 내부에서 이벤트 핸들러를 직접 등록하면 "this" 키워드를 활용할 수 있다는 큰 장점이 있습니다. 이벤트가 발생한 요소 자신을 가리키는 this 덕분에, 함수에 값을 일일이 전달하지 않고도 해당 요소의 스타일이나 속성을 손쉽게 조작할 수 있습니다.

예를 들어 버튼이나 div 같은 HTML 요소에 onclick 속성으로 함수를 연결하면, 함수 내부의 this는 클릭된 그 요소를 참조하게 됩니다.

예제 코드

아래 예제는 페이지가 로드되는 순간 display() 함수가 실행되어 각 요소에 클릭 이벤트를 등록하고, 클릭 시 styleMe() 함수가 배경색과 글자색을 변경하는 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <script>
            function display( ) {
                click.onclick = styleMe;
                uname.onclick = styleMe;
            }
            function styleMe( ) {
                this.style.backgroundColor = "#000000";
                this.style.color = "#FFFFFF";
            }
        </script>
    </head>
    <body onload="display()">
        <div id="uname"> Hello World!</div>
        <button id="click"> Click</button>
    </body>
</html>

동작 방식 살펴보기

페이지 로드가 완료되면 display() 함수가 호출되어 uname과 click 요소에 styleMe 함수가 클릭 이벤트 핸들러로 등록됩니다.
사용자가 요소를 클릭하면 styleMe()가 실행되며, 이때 this는 클릭된 요소 자신을 가리킵니다.
this.style.backgroundColor와 this.style.color를 통해 클릭된 요소의 배경은 검정색(#000000), 글자는 흰색(#FFFFFF)으로 변경됩니다.

이처럼 this를 활용하면 하나의 함수를 여러 요소에 재사용할 수 있어 코드가 간결해지고 유지보수도 훨씬 쉬워집니다. 값을 인자로 넘기는 대신 이벤트 대상 요소를 직접 다루고 싶을 때 가장 깔끔한 방법 중 하나입니다.