O objeto this em JavaScript

Agora vamos trabalhar com o objeto especial this, disponível na função de retorno de chamada de evento. Este objeto aponta para o elemento no qual o evento ocorreu.

O objeto this é conveniente quando o elemento no qual o evento ocorreu e o elemento com o qual as ações são realizadas como resultado do evento são o mesmo elemento.

Por exemplo, se temos um input, podemos vincular a ele um ouvinte de evento de perda de foco e, quando esse evento ocorrer, fazer algo com o texto do input. Vamos fazer o descrito. Suponha que temos um input:

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

Vamos obter uma referência a ele em uma variável elem:

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

Vamos vincular a ele uma função de retorno de chamada para o evento blur:

elem.addEventListener('blur', func);

Dentro desta função func estará disponível o objeto this, apontando para o nosso input:

function func() {
	console.log(this); // contém a referência ao nosso elemento
}

Vamos exibir o conteúdo do atributo value do nosso input:

function func() {
	console.log(this.value); // exibe o conteúdo do atributo
}

Bem, e agora vamos escrever algum texto no input:

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

Também é possível usar uma função anônima:

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

Dado um input. Ao receber o foco por este input escreva nele o número 1, e ao perder o foco - o número 2. Para se referir ao input dentro da função de retorno de chamada use o objeto this.

Dado um botão, cujo valor é o número 1. Faça com que, ao clicar neste botão, seu valor aumente em um a cada vez.