El objeto this en JavaScript

Ahora vamos a trabajar con el objeto especial this, disponible en la función manejadora de eventos. Este objeto apunta al elemento donde ocurrió el evento.

El objeto this es útil cuando el elemento donde ocurrió el evento y el elemento con el que se realizan acciones como resultado del evento son el mismo elemento.

Por ejemplo, si tenemos un input, podemos asignarle un manejador de pérdida de foco y cuando ocurra este evento hacer algo con el texto del input. Hagamos lo descrito. Supongamos que tenemos un input:

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

Obtengamos una referencia a él en una variable elem:

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

Asignémosle una función manejadora del evento blur:

elem.addEventListener('blur', func);

Dentro de esta función func estará disponible el objeto this, que apunta a nuestro input:

function func() {
	console.log(this); // contiene una referencia a nuestro elemento
}

Mostremos el contenido del atributo value de nuestro input:

function func() {
	console.log(this.value); // mostraremos el contenido del atributo
}

Bueno, y ahora escribamos algún texto en el input:

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

También se puede usar una función anónima:

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

Dado un input. Al recibir el foco este input escriba en él el número 1, y al perder el foco - el número 2. Para referirse al input dentro de la función manejadora use el objeto this.

Dado un botón, cuyo valor es el número 1. Haga que al hacer clic en este botón su valor aumente en uno cada vez.