[Javascript] 이벤트 핸들러와 this

 

 

 

인라인 방식 이벤트 핸들러에서의 this

인라인 방식의 경우 이벤트 핸들러는 일반 함수로써 호출되므로 이벤트 핸들러 내부의 this는 전역 객체 window를 가리킨다.

<button onclick="fnClickBtn()">Button</button>

<script>
    function fnClickBtn () {
      console.log(this); // window
    }
</script>

 

 

 

 

프로퍼티 방식 이벤트 핸들러에서의 this

프로퍼티 방식에서 이벤트 핸들러는 method이므로 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.

<button class="btn">Button</button>

<script>
    const btn = document.querySelector('.btn');

    btn.onclick = function (e) {
      console.log(this); // <button class="btn">Button</button>
      console.log(e.currentTarget); // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
    };
</script>

 

 

 

 

addEventListener 방식에서의 this

addEventListener에서 지정한 이벤트 핸들러는 콜백 함수지만 이벤트 핸들러 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.

<button class="btn">Button</button>

<script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', function (e) {
      console.log(this); // <button class="btn">Button</button>
      console.log(e.currentTarget); // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
    });
</script>