😰 ¿Cómo FUNCIONA el EVENT BUBBLING? 🤔 Javascript DOM

Llegó el EVENT BUBBLING, hoy veremos qué es y cómo podemos controlarlo y utilizarlo. Veremos que no es un concepto tan complejo como puede parecer en un principio.
Documentación:
developer.mozi...
Índice:
0:00 Introducción
00:49 EVENT BUBBLING
10:47 DELEGACIÓN de EVENTOS
13:28 EVENTOS en CAPTURE
¿Quieres estar al día? 👌 Síguenos en nuestras redes sociales! 👌
-Twitch: / desarrolloutil
-Instagram: / desarrolloutil
-Discord: / discord
-Twitter: / desarrollo_util

[@mauriciolaratro]

Excelente explicación! Llevo poco tiempo aprendiendo sobre los eventos y el DOM. Sobre este tema en concreto tenia varias dudas que me las esclareciste bastante en este video. Muchas gracias.

[@ignominosdev8381]

es una maravilla el nivel de profundidad/utilidad con el que explicáis. Creo que marcáis la diferencia

[@RingOfFaia]

Me gusto un monton esta saga de videos del DOM, hubo bastantes cosas que no conocia y ahora ya las aprendi, gracias por eso Jose, buena suerte con el canal y con todo este proyecto, es exelente 👍

[@DesarrolloUtil]

Muchas gracias, esperemos que vaya bien!

[@juanisidorogarcia1699]

Super interesante ^^ no conocía esa terminología, me salió tu video como recomendado y te he visto tomándome un cafelito jajjaja. Tienes un suscriptor nuevo y me apunto para seguir viendo tu contenido ;) Muchas gracias por compartir tus conocimientos! Un saludo!!

[@rogeclash2631]

Gracias jose por explicarlo tan claro, otro concepto en el que patinaba y tu me has dado los inline_roller, como siempre Desarrollo Util Cracks

[@DesarrolloUtil]

Gracias Roge!

[@pabloschlo]

Excelentes tus explicaciones! Vuelvo a preguntarte por ese tema del Visual Studio, son de alguna extensión en particular o personalizados por tu cuenta? Quiero el mismo jaja!

[@ZeTaKevin]

Bueno yo lo que hago mayormente cuando tengo que agregar varios listener a botones por ejemplo es lo siguiente. Hago mi document.addEventListener("click", e => { If(e.target.matches("selector css")){ // Y aquí hago toda la lógica que se va a desprender cuando haga click } }) El .matches() comprueba si un elemento puede ser seleccionable por un selector css

[@DesarrolloUtil]

Es otra opción para hacerlo, desde luego. Como curiosidad, esa es la forma en la que se gestionan internamente los eventos en librerías como React!

[@andresjaramillo3324]

excelente explicación, gracias!

[@seluesma]

Excelente video, crack.. explicas muy bien!

[@DesarrolloUtil]

Muchas gracias!

[@JorgeSanchez-yu9qs]

Que bien explicado, gran trabajo, muchas gracias!!!!!

[@DesarrolloUtil]

Gracias a ti Jorge!

[@AlbertCisneros0209]

excelente, gracias

[@elsoldadodetaisontv]

buena explicación, no sabia eso de los eventos.

[@DesarrolloUtil]

Me alegro de que te lleves algo del vídeo!

[@santiagomedina6799]

Buena explicación, José. Gracias.

[@DesarrolloUtil]

A ti!

[@sandokanArg]

excelente Pablo, como siempre

[@DesarrolloUtil]

Esta vez deberías darle la gracias a Jose 🤣

[@sandokanArg]

@@DesarrolloUtil si, más a jose, 🤣🤣🤣🤣 que siempre me ayuda con mis horrores en Js

[@HYP3RK1NECT]

Consulta: ¿como puedo iterar esos artículos en Javascript al cargar la página?

[@fauriciocespedes6138]

Muchas gracias por enseñarme Javascript ☺️

[@DesarrolloUtil]

Gracias a ti por pasarte por aquí!

[@Zett-wv1hm]

en React hace exactamente lo mismo pero sin fase de captura?

[@DesarrolloUtil]

En React, todos los eventos que escribes como onClick, onMouseEnter... se manejan en la fase de bubbling. Si quieres manejar un evento en la fase de captura, tienes que utilizar la prop del evento, terminada en "Capture". De "onClick" a "onClickCapture" - Actúa siempre en fase de bubbling - Actúa siempre en fase de captura Tienes más info aquí: es.reactjs.org/docs/events.html#supported-events Fíjate en el párrafo: "Los controladores de eventos a continuación se activan por un evento en la fase de propagación. Para registrar un controlador de eventos llamado en la fase de captura, agrega Capture al nombre del evento; por ejemplo, en lugar de usar onClick, usaríasonClickCapture para manejar el evento de click en la fase de captura." Espero que te sirva!

[@thejb9902]

Muy bien explicado

[@DesarrolloUtil]

Muchas gracias!

[@javiersivira9317]

excelente

[@klingonmdc]

Jose ,pregunta, eso solo sucede si haces addEventListener o tambien si hacer xej boton.onclick=f(e){} ... ?

[@DesarrolloUtil]

Eso no deberías hacerlo nunca!

[@klingonmdc]

Porque? Puedes elaborar un poco más .o algún libk donde leer al respecto.grqcias

[@DesarrolloUtil]

Siempre es mejor utilizar addEventListener, que utilizar las propiedades onclick etc, si quieres puedes pasarte por algún directo y lo comentamos!

[@klingonmdc]

@@DesarrolloUtil vi tu otro video y si nunca mezclo html con js solo uso puro js vanilla y asignamos la función además esto esta dentro de un objeto.siempre y le tenemos que hacer bind , al objeto para usar this dentro de la función. Entendí al final lo que dices.gracias

[@enfermatorio]

¡Muy bueno!

[@DesarrolloUtil]

Me alegro de que te guste!

[@2kceltics]

muy buen trabajo gracias. Me gustaria saber si hay alguna forma de codificar el codigo Javascript del archivo para q cualquier usuario no pueda verlo pulsando F12 en la consola. Gracias

[@DesarrolloUtil]

Te respondí a esto en el otro comentario. Muchas gracias!

[@PredicasCristianasCPC]

Hola, hace un tiempo utilizo JQUERY, ahora estoy intentando aprender JS nativo, pero veo que nadie explica cosas bien, quien sabe como se hace este evento click en javascrip: $(".newPro").on("click", "i.upDw", function(){

[@newentu]

muy buen tutorial, pero esta complicado para mi!!

[@DesarrolloUtil]

Poco a poco!

[@newentu]

@@DesarrolloUtil asi es!

[@mrtmla1915]

Vine buscando cobre y encontré oro!

[@dieguitto3528]

Vale, me he perdido el estreno... Soy un desastre. La próxima no fallo!

[@DesarrolloUtil]

No te lo perdiste, se me olvidó a mi programarlo como estreno 😂

[@dieguitto3528]

@@DesarrolloUtil Eso es verdad porque yo entré esta mañana al canal y no vi nada 😅