¿Qué es un evento?
Los eventos son acciones que suceden en el sistema y que nos permiten definir un comportamiento cuando éstos ocurren. Con Javascript, podemos definir como va a reaccionar el sistema ante la interacción con el usuario, como por ejemplo hacer click en un botón, presionar una tecla, hacer foco sobre un input, etc. Pero no necesariamente tiene que ser un usuario el que interactúe, sino que también se puede disparar un evento, por ejemplo, cada vez que se carga una pagina.
Un evento en Javascript no es de utilidad si no se le asocian funciones a cada uno. Así es cuando se produce un evento, se ejecuta una función o una porción de código para que la aplicación pueda responder ante éste. Estas funciones que se definen para cada evento, se las llama manejador de eventos (handler), y existen varias formas diferentes de definirlos.
Formas de registrar eventos
I) Manejadores de eventos in-line
Podríamos definir un evento cualquiera asociado a una etiqueta HTML con el atributo correspondiente a un evento aceptado por esa etiqueta.
<button onclick="console.log('Hola!')">Saludar</button>
Al hacer click en el botón, vamos a ver en la consola un el texto "Hola!". Esta técnica esta en desuso y se recomienda no utilizarla ya que es mejor tener código JavaScript en un archivo externo y no en una etiqueta HTML.
II) Manejadores de eventos como propiedades
Esta forma nos permite registrar los eventos en un archivo externo javascript
En el ejemplo, asignamos un console.log("Hola!") a la propiedad onclick del boton
var boton = document.querySelector("button")
boton.onclick = console.log("click!")
El problema es, que la función se ejecuta al momento que el programa lee la línea donde se asigna a la propiedad onclick, entonces se va a mostrar en el momento de ejecución, y el botón ya no tendrá efecto sobre el evento.
Para que esto funcione, la función que asignamos no tiene que estar ejecutada, sino que tenemos que asignarle la referencia a esa función
function saludar() {
console.log("Hola!")
}
boton.onclick = saludar;
Otra opción es asignar una función anónima como la siguiente.
boton.onclick = function() {
console.log("Hola anonimo!");
}
Pero, ¿que pasa si hacemos ambas cosas a la vez?, ¿El evento registra ambos saludos?. La respuesta es no, ya que la ultima función asignada fue la anónima y la propiedad onclick fue reasignada.
III) Api web eventtarget
Este método nos permite registrar tantos eventos del mismo tipo como queramos, utilizando la api web Eventarget, que nos brinda las funciones addEventListener() y removeEventListener().
Con addEventListener(), podemos resolver el problema del punto anterior, ya que nos permite registrar mas de un callback para el mismo evento.
Pero, ¿Que es un callback?
Un callback no es mas ni menos que una función que se pasa como parámetro a otra función, para que ésta la ejecute en el momento que sea necesario.
Entonces, podemos registrar diferentes acciones al mismo evento.
boton.addEventListener("click", saludar);
boton.addEventListener("Click", function(){
console.log("Hola anonimo!")
});
Usando esta forma, también podemos fácilmente quitar un manejador con la función removeEventListener(evento, callback), y con un tercer parámetro opcional podemos cambiar la fase en la que se ejecuta el evento.
Fases de un evento
La fase de un evento es la forma en la que el mismo se propaga a traves del DOM.
- Bubbling: Ejecuta el handler del elemento que dispara el evento, y luego intenta ejecutar los handlers que se hayan registrado en los nodos padres, hasta llegar al nodo HTML.
- Capturing: Es la fase inversa, es decir, dispara los handlers registrados del mismo tipo de evento desde el elemento raíz hasta el elemento que ejecuto el evento.
Por defecto los eventos se disparan en la fase Bubbling pero podemos cambiarlo con el ultimo parámetro opcional
elemento.addEventListener('evento', funcion, booleano)
Booleano false: se mantiene la fase Bubbling como lo tiene por defecto.
Booleano true: se cambia a la fase Capturing
let boton = document.querySelector("button");
let div = document.querySelector("div");
let body = document.body;
boton.addEventListener("click", mostrarAlert, true);
div.addEventListener("click", mostrarAlert, true);
body.addEventListener("click", mostrarAlert, true);
function mostrarAlert(){
alert("Hiciste click en " + this);
}
En el ejemplo anterior, el orden de ejecución seria body -> div -> button
Objeto Event
Javascript nos da la posibilidad de contar con un objeto Event que se pasa como único parámetro en el handler del evento.
boton.addEventListener("click", function(e){
console.log(e)
})
Este objeto cuenta con propiedades genéricas y también personalizadas por evento con información relativa a la acción que se ejecuto, por ejemplo un evento click nos puede traer
las coordenadas del puntero al momento del click.
Una propiedades importante es target, que nos permite tener información del elemento que lanzo el evento
Además de sus propiedades, los objetos Event tienen métodos que nos permiten entre otras cosas cancelar la propagación de una fase o cancelar el comportamiento por defecto que tiene un evento.
stopPropagation
document.addEventListener("click", function(){
console.log("Click del DOM")
})
boton.addEventListener( "click" , function (e){
console.log("Click del boton")
e.stopPropagation()
//...
})
En el ejemplo anterior, podemos ver que el click que tenia registrado el DOM ya no se ejecutara, si es que tenemos el evento en fase bubbling.
preventDefault
También podemos cancelar el comportamiento por defecto de un elemento
<a href="https://somospnt.com/">Ir a Somos PNT</a>
var enlace = document.querySelector("a") enlace.addEventListener("click", function (e){
e.preventDefault()
//...
})
Así podemos interceptar el click del enlace para realizar las operaciones que nosotros creamos necesarias y no lo que el nodo haría por defecto, en este caso llevarlos a la pagina del href.