Eventos y manejadores de eventos en JavaScript.

Introducción

Los eventos son acciones que se toman para avisar al código de cambios que pueden afectar la ejecución del mismo. Estos se disparan apartir de interacciones del usuario como hacer clic,presionar un botón del teclado, redimensionar la pantalla etc...

Por ejemplo, si un usuario hace clic en un botón de nuestra página, podemos querer reaccionar a esto mostrando una caja con información.

Los eventos son disparados dentro del contexto de nuestra ventana del navegador, y se adjuntan a un item específico dentro de esta. Esto puede ser un solo elemento HTML, un conjunto de elementos HTML, el documento HTML de la pestaña actual, o la ventana de nuestro navegador como un todo.

Hay muchos tipos de eventos diferentes que pueden ocurrir, algunos ejemplos son:

El usuario selecciona un elemento determinado o pasa el ratón sobre este.
El usuario presiona una tecla del teclado.
El usuario redimensiona o cierra la ventana del navegador.
Una página termina de cargarse.
Un formulario es enviado.
Un video es reproducido,pausado o terminado.
Ocurre un error.

Aqui podemos ver los eventos/manejadores de evento disponibles para los nodos de tipo Elemento.

Si no sabes qué son nodos y nodos de tipo Elemento revisa mi otro artículo.

La dos formas de manejar eventos

Recordemos que un elemento HTML es representado como un objeto en el DOM. En JavaScript, podemos manejar eventos de dos formas:

Usando las propiedades "onevent" del elemento.

Los objetos JavaScript que son capaces de disparar un evento tienen su correspondiente propiedad onevent. (estas propiedades son nombradas con el prefijo on delante del nombre del evento, por ejemplo 'onclick', 'ondrag').

Para configurar un manejador de eventos usando esta forma, podemos simplemente asignarle una función a la propiedad onevent.

// Ejemplos de propiedades de evento son onclick,ondblclick,ondrag etc...
elemento.onclick = function () {
 console.log('Esta función fue asignada a la propiedad onclick del elemento');
}

Usando el método addEventListener del elemento.

Podemos manejar el evento usando un "detector" (listener) para el elemento usando el método addEventListener(). Este método acepta como argumentos un tipo de evento a ser escuchado y la función a ejecutarse cada vez que se el evento se produce.

elemento.addEventListener('click', function (){
    console.log("Esto es un detector de eventos");
}

La principal diferencia entre los dos es que sólo podemos usar un manejador de evento por elemento usando la propiedad onevent. Sin embargo,podemos añadir varios manejadores de evento por elemento con el método addEventListener().

Veamos lo que pasa cuando intentamos añadir dos manejadores de evento declarando una función a la propiedad onclick:

const boton= document.querySelector(".btn")

boton.onclick = () => {
  console.log("primer manejador de eventos!");
};

boton.onclick = () => {
  console.log("segundo manejador de evento!");
};

/*Al hacer click en el botón el output en consola sería:
segundo manejador de evento!
*/

Dado que un objeto solo puede tener un valor para la misma propiedad, el primer event handler sería sobrescrito por el segundo.

Vamos a repetir lo mismo, pero usando el método addEventListener():

const boton= document.querySelector(".btn")

button.addEventListener("click", () => {
  console.log("primer manejador de eventos!");
});

button.addEventListener("click", () => {
  console.log("segundomanejador de eventos!");
});

/* Al hacer clicl el output en consola seria:
primer manejador de eventos!
segundo manejador de eventos!
*/

En este caso, podemos tener varias llamadas a la función del mismo objeto, por lo que ambos detectores de evento son disparados a la vez cuando hacemos clic en el botón.

Dev.lucas