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:

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

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

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

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

javascriptelem.addEventListener('blur', func);

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

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

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

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

Bem, e agora vamos escrever algum texto no input:

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

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

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