이벤트 리스너 안에서 this

var value=10;
$(document).ready(function(){

    // 이벤트 리스너 등록
    $("#btn").click(function(){
        this.value=20;
        value=30;

        console.log("1. value = "+value);
        console.log("2. this.value = "+this.value);
        console.log("3. window.value = "+window.value);
    });
});
/*
    실행결과
    1. value = 30
    2. this.value = 20
    3. window.value = 30
*/

 

이벤트 리스너에서의 this는 이벤트를 발생시킨 객체를 가르킨다. 그렇기 때문에 this.value=20; 여기서의 this는 #btn이 된다. 그렇기때문에 #btn객체에 value라는 프로퍼티를 동적으로 추가 하게 된다.

위에 코드 구조는 중첩함수와 동일한 구조인걸 확인할수 있다. 따라서 value=30구문은 중첩함수와 동일한 결과를 나타낸다.