Eventos en Javascript (parte 1)

9-3-2020

Aquí se empieza a poner interesante y complicar un poco el tema.

Trabajar con eventos es donde la magia de JS se empieza a hacer visible, ya que vamos a agregarle dinamismo en tiempo real a nuestro proyecto.

 

Callbacks

El llamado callback es una función que se pasa a otra como parámetro. Entonces la función que se pasó como parámetro no se ejecuta inmediatamente, sino cuando ejecutamos la función en la que está contenido.

Veamos algunos ejemplos:

//capturamos el elemento 
var btn = document.getElementById('btn') 

//creamos una función 
const uno = () => console.log('Soy la función uno') 

//le agregamos el escuchador 
btn.addEventListener('click', uno) 

//uno es la función que será la que haga algo con el evento capturado 
//lo interesante es que podemos agregarle tantos escuchadores como necesitemos. Si tuviésemos una función llamada "dos" que quisiéramos que hiciera algo con el mismo evento click, simplemente la agregamos 

btn.addEventListener('click', dos) 

btn.addEventListener('click', e => { console.log(e) })

 

Escuchando eventos

Como vimos, en JS antes de hacer algo con algún elemento hay que capturarlo y meterlo en una variable.

Para poder hacer algo con un evento, por ejemplo el click del ratón, también necesitamos capturarlo. Y para capturarlo tenemos que implementar un "escuchador", le agregamos a una variable (que contiene un elemento) un escuchador que se quede escuchando si el evento en cuestión ocurre.

//capturamos el botón
var btn = document.getElementById('idDelBoton')

//generamos una función que haga algo
const uno = () => {
  console.log('Soy la función uno')
}

//generamos escuchador que mencionaremos más adelante y le asignamos la función uno al evento click.
//de esta forma al clickear el botón se ejecutará "uno"
btn.addEventListener('click', uno)

//otra forma de asignar un callback
btn.addEventListener('click', function(e) {
   // e es el objeto evento asociado al click
})

 

Propagación de Eventos

Un concepto importante trabajando con eventos es el del Propagación de eventos.

Se trata de la repercusión que tiene un determinado evento sobre los que se encuentran arriba y abajo de éste. Una especie de eco que sube o baja por los items de la página.

Por ejemplo, teniendo un elemento metido en tres divs distintos, si clickeamos en él, qué efecto tendrá ese click en el div que clickeamos sobre los otros dos?

Por ejemplo, tenemos un elemento X metido en tres divs anidados.

 

Si hago click en elemento X, éste evento click se propagará desde adentro hacia afuera, hasta llegar al body. Esto se llama bubbling y es el efecto default. También se puede propagar al revés, en este caso se llama capturing.

 

Algunos ejemplos básicos:

var tres = document.getElementById('tres')
var dos = document.getElementById('dos')
var uno = document.getElementById('uno')

tres.addEventListener('click', function () {
    console.log('tres')
}, !true)
dos.addEventListener('click', function (e) {
    e.stopPropagation()
    console.log('dos')
}, !true)
uno.addEventListener('click', function () {
    console.log('uno')
}, !true)