JavaScript에서 this 객체

이제 우리는 이벤트 핸들러 함수 내에서 접근 가능한 특별한 객체 this를 사용해 볼 것입니다. 이 객체는 이벤트가 발생한 요소를 가리킵니다.

this 객체는 이벤트가 발생한 요소와, 이벤트 결과로 어떤 작업을 수행하는 요소가 동일한 요소일 때 편리합니다.

예를 들어, 우리에게 인풋이 있다면, 포커스 아웃 이벤트 핸들러를 바인딩하고, 이벤트 발생 시 인풋의 텍스트로 어떤 작업을 수행할 수 있습니다. 설명한 것을 구현해 봅시다. 인풋이 다음과 같이 주어졌다고 가정합시다:

<input id="elem" value="text">

변수 elem에 이 인풋에 대한 참조를 얻어봅시다:

let elem = document.querySelector('#elem');

blur 이벤트에 대한 핸들러 함수를 바인딩해 봅시다:

elem.addEventListener('blur', func);

이 func 함수 내부에는 우리의 인풋을 가리키는 this 객체에 접근할 수 있습니다:

function func() {
	console.log(this); // 요소에 대한 참조를 포함합니다
}

인풋의 value 속성 내용을 출력해 봅시다:

function func() {
	console.log(this.value); // 속성 내용을 출력합니다
}

자, 이제 인풋에 어떤 텍스트를 써 봅시다:

function func() {
	this.value = '!!!';
}

익명 함수도 사용할 수 있습니다:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

인풋이 주어졌습니다. 이 인풋이 포커스를 얻을 때 숫자 1을 쓰고, 포커스를 잃을 때는 숫자 2을 쓰세요. 핸들러 함수 내부에서 인풋에 접근하기 위해 this 객체를 사용하세요.

값으로 숫자 1을 가진 버튼이 주어졌습니다. 이 버튼을 클릭할 때마다 그 값이 1씩 증가하도록 만드세요.