🖖 Inicio

SERVICIOS

Salir

nochedía

Event Bubbling y el descontrol en JavaScript

300 palabras
1 minutos
January 28, 2020
blogjavascript

El event bubbling y capturing se refiere a que cuando tenemos listeners dentro de listeners, los eventos del primero también se recibirán en el segundo, con lo cual lo suyo es prevenirlo

Eventos

En Front End tenemos los eventos, que es la manera de interactuar que tenemos los usuarios con la interfaz de usuario

Por ejemplo, un evento en el DOM tal como clicar un botón

Y en este caso el sentido común nos dice que recibiremos el event en el mismo elemento <button>

Y claro, es así

Pero y entonces, qué es esto del bubbling?

El bubbling se refiere al hecho de que el evento lo capturará nuestro elemento y también todos los elementos padre de ese elemento

Esto podemos revertirlo ya que nuestro gestor de eventos, el addEventListener, tiene un tercer argumento con el que podemos escoger la dirección del bubbling

js
el.addEventListener(event, () => {}, false) // default
el.addEventListener(event, () => {}, true)

En el primer caso tenemos el Event Bubbling

En el segundo caso tenemos el Event Capturing, que básicamente se refiere a invertir la dirección de los eventos

html
<div><button /></div>

En el primer caso, el <button> recibiría primero el evento, y el <div> lo recibiría después En el segundo caso, a la inversa, primero el <div> y segundo el <button>

Pero ojo, para que los eventos tengan Bubbling o Capturing no basta con tener elementos padre o hijo

Esto ocurre sí y sólo sí tenemos Listeners para todos ellos

Si el único listener de nuestro documento es el del botón, no habrá ni Bubling ni Capturing

Pero si tenemos más listeners (porque queremos captar más cosas) y hay algunos que están dentro de otros, ahí está el tema, que esos listeners también recibirán esos eventos

Y muy posiblemente no es lo que queremos

Cómo sería un ejemplo completo con React? Bueno, en React no utilizamos el addEventListener ya que esto significaría acceder directamente al DOM

pero acceder al dom ESTÁ PROHIBIDO!!

En su lugar, lo hacemos directamente (algo que recuerdo que precisamente el addEventListener sustituía, qué tiempos)

Pero al final es lo mismo

js
// App.js
import React, { useRef } from 'react'
export default function App() {
const div = useRef()
const button = useRef()
return (
<div ref={div} onClick={() => console.log('yo también!')}>
<h1>Hola</h1>
<button ref={button} onClick={() => console.log('clicando!')}>
clica!
</button>
</div>
)
}
// clicando!
// yo también!

Al clicar en el botón tendremos las dos consolas funcionando

Que lo quieres al revés, con el Capturing en lugar del Bubbling?

js
// App.js
import React, { useRef } from 'react'
export default function App() {
const div = useRef()
const button = useRef()
return (
<div ref={div} onClickCapture={() => console.log('yo también!')}>
<h1>Hola</h1>
<button ref={button} onClickCapture={() => console.log('clicando!')}>
clica!
</button>
</div>
)
}
// yo también!
// clicando!

Fantástico

Ah, y si quieres evitarlo?

Muy fácil, con el event.stopPropagation()

js
// App.js
import React, { useRef } from 'react'
const log = (e, msg) => {
e.stopPropagation()
console.log(msg)
}
export default function App() {
const div = useRef()
const button = useRef()
return (
<div ref={div} onClickCapture={e => log(e, 'yo también!')}>
<h1>Hola</h1>
<button ref={button} onClickCapture={e => log(e, 'clicando!')}>
clica!
</button>
</div>
)
}
// yo también!

*Fíjate que aquí el onClick y el onClickCapture son indistinguibles

Listos!

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]