En los capítulos anteriores hemos estado viendo como manipular el DOM, hemos visto como recorrer los elementos, las diferentes técnicas y métodos que tenemos para poder acceder, modificar los estilos, el HTML, colocar e insertar un nuevo elemento en diferentes posiciones, guardar elementos en una variable.
Una de las principales razones por las que fue creado Javascript a finales de la década de los 90 es por la interacción, que es lo que vamos a comenzar a ver en este capítulo.
A partir de este capítulo comenzaremos a ver los eventos.
Que son los eventos
Los eventos son aquel mecanismo que tenemos en Javascript para poder controlar las acciones del usuario y definir ciertos comportamientos del documento para que sucedan en cierto momento o se cumplan algunas condiciones.
Las funciones que se ejecutan en un evento es lo que en inglés se conoce como event handler o manejador de eventos, también denominados observadores o escuchadores de eventos.
Maneras de definir los eventos
Hay 3 maneras de definir los eventos en Javascript. Podemos ir a la página de MDN y buscar la palabra event para ver toda la documentación acerca de los eventos.
En este curso veremos los eventos más importantes, prácticamente hay eventos para todo. Las formas que tenemos para definir los eventos son:
1. Evento pasado como atributo en una etiqueta HTML
no es la forma mas recomendada. Para que funcione como atributo, tan sólo hay que invocarlo de manera semántica, con la palabra on- seguida del nombre del evento.
Ejm
<button onclick="alert('Hola')">Evento con atributo HTML<button>
<button onclick="holaMundo()">Evento con atributo HTML<button>A la función que le hemos pasado al evento se ha transformado en una función manejadora del evento, mediante la cual podemos acceder a un objeto especial que es el evento en sí, y a ello podemos acceder con la palabra reservada event.
2. Como un manejador de eventos: vamos a ver un ejm para entender el proceso.
Ejm
<button id="evento-semantico">Evento con manejador semántico</button>
<script>
const holaMundo = function() {
const $p = document.createElement("p");
$p.textContent = "Hola Mundo";
document.body.appendChild($p);
console.log(event)
}
const $eventoSemantico = document.getElementById("evento-semantico");
// No se ponen los paréntesis pq sino se ejecutaría la función
$eventoSemantico.onclick = holaMundo;
</script>Nota: Cuando definimos un evento como si fuera semántico, simplemente igualamos el evento semántico al nombre de la función pero sin los paréntesis, porque los paréntesis harían que la función se ejecutase inmediatamente.
Como podemos ver en el ejm de arriba, una misma función puede servir para desencadenar eventos en diferentes elementos.
Inconvenientes de los eventos semánticos
Los eventos semánticos tienen un inconveniente. Va a haber veces donde a un mismo elemento HTML tengamos que asignar diferentes manejadores de eventos, es decir, diferentes funciones que pueden hacer diferentes cosas. La limitante que tienen los tipos de eventos semánticos es que, una vez que hemos definido el evento semántico, sólamente va a poder ejecutar una sóla función.
Toda función que se convierte en un manejador de eventos semántico no puede recibir parámetros, el único parámetro que recibe es el evento en sí. Le podemos incluir como parámetro event, o bien simplificar el nombre con lo que los desarrolladores suelen usar, y es la palabra e. que representa el evento, como muestra el siguiente ejm.
Ejm
<button id="evento-semantico">Haz clic</button>
<script>
const $eventoSemantico = document.getElementById("evento-semantico");
$eventoSemantico.onclick = function(e) {
alert("Esto es un evento semántico");
console.log(e);
// Mostraría lo mismo
console.log(event);
}
</script>3. Manejadores múltiples
si tenemos la necesidad de definir diferentes funciones a un mismo elemento. Para ello tenemos los manejadores múltiples, en los cuales vamos a utilizar un método denominado addEventListener() que es el que permite levantar un manejador de eventos. addEventListener() puede recibir varios parámetros
Veamoslo en un ejm.
Ejm
<button id="evento-multiple">Evento con manejador múltiple</button>
<script>
const $eventoMultiple = document.getElementById("evento-multiple");
$eventoMultiple.addEventListener("click", holaMundo);
// Solo nombramos la función que debe de estar declarada,
// sin los paréntesis
$eventoMultiple.addEventListener("click",()=>{
alert("Manejador de eventos múltiple");
console.log(e);
console.log(e.type); // El tipo de evento
console.log(e.target); // El evento que lo origina
});
</script>Como podemos ver, cuando utilizamos manejadores semánticos, solo pueden ejecutar una función, mientras que son los manejadores múltiples se pueden ejecutar varias funciones a un mismo elemento para un mismo evento.
Resumen
En este capítulo hemos visto 3 formas de trabajar con los eventos.
- Evento como si fuera un atributo del HTML.
- Evento como manejador semántico, los cuales sólo pueden ejecutar una función.
- Evento como manejador múltiple utilizando el método addEventListener().