Dos años despues de terminar el curso y habiendo conseguido trabajo gracias a vos, vuelvo aquí porque seguís siendo mi primer referencia para las dudas de JS
Esta clase fue una de las mejores que llevamos del DOM, aparte de que ahorramos recursos, ahorramos mucho codigo y, personalmente, es mucho mas comoda y legible. Ahora a seguir con el BOM!! Dejo mis apuntes: //*👉 La delegacion de los eventos no consiste en otra cosa que, por ejemplo cuando yo tengo 1000 divs no seria optimo agregarle el listener a cada vez, de igual manera no es optimo aunque lo hagamos con un ciclo como el forEach. Ya que estaria generando un listener a cada elemento, cuando yo podria tener el evento asignado a un elemento padre superior y a partir de ahi, buscando con un selector quien origino el evento, desencadenar la programacion que quiera al momento del evento //*?💬 Imaginense que en un formulario que tenga 30 inputs y cada uno tenga validaciones. En vez de trabajar el evento onchange de cada input o el evento onblur, o el onfocus, el evento en cuestion se lo asignemos, en lugar de a esos 30 inputs, al formulario como tal. Incluso se podria asignar al documento raiz, que en este caso es el document. //*🦊✅ Y el profe Jon aplico esta ultima forma cuando hace proyectos con vanilla JS al momento de ESQUEMAR el modelo de sus EVENTOS. Jon genera un listener 🌎GLOBAL para el DOCUMENT, es decir si tiene que activar con click, con el input submit, blur o todos los eventos asignados, se los pega al document y a partir de ahi DETECTA cual es el nodo que le INTERSA QUE ACTIVE EL EVENTO y DESENCADENA la programacion requerida. De tal menera que en lugar de tener 1000 listeners generados por el evento click, tiene un SOLO LISTENER generado al DOCUMENT y detecta cual es el evento que va a desencadenar esa accion del usuario //!❕ Un detalle IMPORTANTE es que tambien vamos a EVITAR la PROPAGACION, entonces ya nosotros no tendriamos que estarla deteniendo, porque como el evento esta asignado al document ya NO necesitamos el trabajo que hace la mimsa const $divsEventos = document.querySelectorAll(".eventos-flujo div"), $linkEventos = document.querySelector(".eventos-flujo a");
function flujoEventos(e) { console.log( `Hola te saluda ${this}, el click lo originó ${e.target.className}` ); } document.addEventListener("click", e => { console.log("Click en",e.target) if(e.target.matches(".eventos-flujo div")) { flujoEventos(e) } if(e.target.matches(".eventos-flujo a")) { alert("Hola soy tu amigo y docente digital... Jonathan MirCha") e.preventDefault() } }) //?🤔 Por que cuando nos referimos al this del evento que le asignamos al document nos aparece window? Porque se lo asignamos al document y en ese momento se esta refiriendo al objeto global, devuelve window ya que document cuelga de window y al estar colgada no hace falta aclararlo //*✅✅ Con esta delegacion de eventos le ahorramos muchos recursos al navegador y mejoramos el rendimiento de nuestro programa, ya que en vez de agregarle un listener a cada elemento, asignamos uno por cada tipo de evento que queramos ejecutar
Jon, excelente explicación. La verdad que nos haz dado una herramienta increíble para optimizar recursos. Tus cursos son lo mejor de lo que he visto en las redes. Muchas gracias por todo.
Realmente Jon eres una persona que creía que no existía, el contenido de este curso es excelente y lo mas importante, no lo encontras en otro lado sin tener que pagar precios inaccesibles, trato de difundir el curso por todos lados, porque me cuesta entender como no tienes millones de seguidores. Te agradezco por tu contenido, por tu esfuerzo, dedicación y por la paciencia en explicar para que no se te olvide ningun detalle. Eres realmente un genio
Qué clase maestra diste en este video, es contenido único en youtube. Me alegra la manera en la que compartes tu conocimiento fruto de tu experiencia con todos nosotros. Si pudiera le daría 100 likes al video, quiero que sepas que comparto tus videos con mi clase completa, así que todos mis compañeros están enterados y más de uno está siguiendo este curso. Saludos!
Mil gracias Jonathan, eres de los pocos que han mencionado este tema, las buenas prácticas las estoy aprendiendo de ti y de Dorian desings. Porcierto veros a ti y a dorian en un directo, seria una bomba atómica de información. Amino hermano, saludos desde África del Norte
@@jonmircha Me encuentro con un problema cuando la estructura html cuenta con muchos elementos hijo, nieto, bisnieto, etc porque en ese caso no me los detecta todos y tengo que estar jugando con la propiedad css pointer-events para que no detecte los que no me interesa... Por ejemplo, yo quiero que me detecte el hijo y solo me detecta el elemento más profundo, entonces le aplico la propiedad pointer-events: none; a ese elemento para que no me lo detecte. www.screenpresso.com/=G6Xgd En esta captura, me detecta antes el último span (.et-pb-icon) que el elemento que yo quiero que detecte (.about__tabs__item, que ni siquiera lo detecta) No sé si existe otra forma de hacerlo más efectiva y mejor, claro.
Impresionante clase Jon. No se para de aprender contigo. No me cansaré nunca de agradecerte por todo el conocimiento que pones al alcance de todos de forma gratuita. Saludos Jon.
sigo a muchos profesores y youtubers, aprendo muchísimo de varios, pero Jon, tu definitivamente eres excelente! Apenas pueda voy a suscribirme a alguna de tu membresías, te mereces éso y mucho más!
(ojalá tuvieras algún método de pago disponible para Argentina, MP, Payoneer, Cafecito o algo así, lamentablemente paypal se me hace imposible actualmente)
La funcion flujoEventos la pude hacer trabajar dentro del ambito de los div utilizando las call, apply, bind todo está relacionado con lo anteriormente dado, muy bueno!
ufff buenísimo Jonatan nunca me paso por la mente poner un addEventListener al document y controlar todos los eventos con target.matches eres un crack!!
Es encreible como puedes aprender todo con respecto a los evetos y una vez aprendidos nos muestres que hay una manera mas sencilla, no solo vas al punto sino te explayas y podemos conocer mas cosas, gracias por tanto♥. Justamente conseguire unas practicas como programador y cuando me paguen te donare un taquito :D
Justamente estoy trabajando en un proyecto donde debo de "escuchar" acciones de varios elementos, aunque llegué a mejorar el código. Con ésta forma creo que me va a quedar incluso más fácil de organizar todo... Gracias profe!
Que gran forma de hacerlo busque y busque como acceder a los elementos de una Tabla, en todos lados dicen que hay que ponerle eventos a cada celda o fila, con este método y .closets puedo obtener la td a la que se le da click y todo el tr al que pertenece. Gracias por compartir tus conocimientos y saludos desde Tampico, Tam.
// 76. DOM: Delegación de Eventos function flujoEventos(e) { console.log(`Hola te saluda ${this}, el click lo originó ${e.target.className}`); e.stopPropagation(); } // En lugar de haber tenido 4 listeners, solamente tengo la asignación de un "listener" al evento click del nodo principal "document". Con esta técnica a parte de mejorar el rendimiento solamente estamos teniendo una sola asignación al evento "click". A través del condicional "if" evaluamos los eventos. document.addEventListener("click", (e) => { console.log("Click en", e.target); if (e.target.matches(".eventos-flujo div")) { flujoEventos(e); } if (e.target.matches(".eventos-flujo a")) { alert("Hola soy tu amigo y docente digital... Jonathan MirCha"); e.preventDefault(); } });
Tu explicando delegación de eventos, y yo viendo una oportunidad de revisar código de paginas web para aprender un poco mas solamente dando click jajajaj. Jon de verdad que tus clases son geniales, y los comentarios de tus alumnos digitales motivan cada día más a seguir aprendiendo de tu mano....Bendiciones🧙♂️🧙♂️🧙♂️
Ingeniero Jonathan, me gustaría saber ¿Cómo se haría en el caso de que fuesen demasiados elementos a los que asignar eventos? ¿Podría ser asignándole los nombres de los elementos a un arreglo ? Pero entonces ¿cómo se le asignarían los if de cada elemento? ¿Se podría crear un módulo aparte con el arreglo para eso? O ¿cómo sería?
Otra forma de agregar los eventos a los elementos generados dinamicamente con base en datos obtenidos con la api fetch ó ajax es generar los respectivos addEventListeners en una Template String y ejecutar ese código con la función eval, luego de generar los elementos dinamicamente. Aunque me parece mas optimo como lo presenta en este video.
hola Jon, no se si tienes un video donde se explica la diferencia y casos de uso entre las propiedades target y currenTarget, dentro la delegacion de eventos . Saludos...
Hola jon, en el minuto 12:36 se imprime [object Window] porque al usar la función flecha en el eventListener, "this" pasa a hacer referencia al elemento padre de document (= Window) ??
en ves de usar matches tambien se puede usar className para comprobar si la clase existe o classList.containst('clase') para comprobar si la clase tambien existe , cieerto?? o en todo caso si coincide hasta con su id , event.target.id == 'idElement'
@@jonmircha acabo de hacer el ejercicio de el menu hamburgesa de la clase 81 y no me funcionó con nunguna de las opciones que di acá pero con matches si funcionó , por que será ? que raro
Muy buen video Profe!! , solo una pregunta , cuando dijiste el ejemplo de peticiones con ajax , se podria usar las promesas para agregar un evento de forma asincrona , osea agregarle el evento con promesas cuando ya el contenido html este cargado?
Jon, me quedó solo una duda. ¿Al trabajar los eventos de esta manera, hay que usar solo los selectores del tipo class? Ya que los id no es conveniente que se repitan y usar solo selectores de etiquetas nos harían perder el control si nuestro código crece y esas etiquetas se repiten. EDIT: Acabo de leer "Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase..." Pensaba que las clases eran exclusivas, o una buena práctica, solo usarlas con CSS :D
Buenas tardes profe! Quisiera hacerle unas preguntas. Averiguando un poco encontré sobre la existencia de motores de plantillas como "Handlebars" y Frameworks como "Angular" ¿Con que es mas recomendable trabajar (ya sea por comodidad o tiempo) JavaScript Vanilla; JavaScript con Motor de Plantilla o con un Framework como Angular? ¿Y porque? Aun soy nuevo en todo esto, por eso le pregunto a usted que sabe mucho mas y quizás pueda guiarme un poco. Desde ya, muchísimas gracias y disculpe por las molestias
Maestro Jon lo de la delegación de eventos al DOM y se ejecute en elementos de una api que todavia no ha cargado, se puede solucionar los errores de consola metiendo todas las acciones dentro de un evento padre por asi decirlo que tenga un condicional que verifique primero si los eventos de la Api ya cargaron?
Profe una consulta, ¿si quiero un elemento div en específico y no precisamente cualquier div que exista? He estado intentando pero no me ha quedado. Y ya preferí mejor preguntar. Digamos el div en la posición 2. O si tenemos 10 figure, no quiero que aplique a cada figure, sino solamente a la 5 por ejemplo.
Prof repasando conceptos, pienso pasar una app que hice en react a vanilla js, su filosofía de que mientras se pueda es mejor vanilla js prurito... La estoy practicando.. Nuevamente gracias por tanto Jon!!
Buenas tardes. Profesor, por que dentro del oyente document que llama a la función addEventListener(), no funciona el llamado del método call(), que haga la función llamada para desarrollar las acciones del evento en cuyo interior usa “this”? Cuando llamo el metodo call(), le paso por parámetro el objeto { if(e.target.matches('.eventos-flujo div')){ flujoEventos.call($divsEventos, e) } }) Considerando que la función que desarrolla las acciones del evento es esta: function flujoEventos (e){ console.log(`Hola te saluda ${this.className}, el click lo originó ${e.target.className}`) }
Hola Jon! a ver si entendi bien, cuando usamos this en una función declarada, ese this hace referencia al scope superior al ámbito en el cual se declara, por lo que windows que está por encima de document es al que se le hace referencia, es así?
Hola Jon espero estés bien, tengo una duda !. Entonces se aplicaria la delegacion de eventos siempre que se pueda incluyendo en aplicaciones pequeñas o solamente cuando sean aplicaciones grandes que requieren mas demanda de recursos e interaccion con el DOM ?, nuevamente te doy gracias por estos cursos Jon !
Sí, por ello la importancia del tema de la delegación de eventos que vemos en este video ;) en vez de tener n... listener, tenemos uno y lo activamos depende del selector que nnecesitemos
Me quedó una duda del video, ¿al manejar de esta manera los eventos no hay que evitar que cada que un usuario haga "click" en una parte del documento se ejecute un "addEventListener"? (cuando daba click en el body activaba un "addEventListener"), ¿eso no afecta el rendimiento?
Saludos. Es mas optimo asignar siempre el addEventListener al body, o es preferible hacerlo a un elemento superior que contenga los elementos hijos que deberían disparar ese evento???
Es igual, mientras exista el elemento en el momento que carga el DOM, puedes usar cualquier elemento padre, pero yo prefiero hacerlo al document :) con eso me evito la falla, ya que es el objeto padre del dom
@@jonmircha saludos jon gracias por ti respuesta.. lo tendré en cuenta.. ahora te pregunto, solo usas la delegacion de eventos cuando tienes que asignar el evento a muchos elementos o lo usan en cualquier caso? Aun cuando sean poco o un solo elemento?
Buenas! Tengo una duda que me esta matando, espero puedas verla y aclararme mas del tema jajaja. Mi pregunta es si puedo activar la propagación de eventos cuando utilizo document.addEventListener... Por si no me expliqué bien quiero decir: creo varios div de manera dinámica y quiero que al seleccionar uno me muestre los div que le siguen hasta llegar al div padre y realizar una acción con ellos (teniendo en cuenta que estoy haciendo click en el documento). Desde ya muchas gracias! Buen video, solo quede con esa pequeña duda. Un genio profe
Maestro MirCha, quiero detectar cuando el visitante quiera salir de la página para lanzar un modal con una encuesta sobre la experiencia al visitar el sitio. He intentado con window.addEventListener("beforeUnload", function(){…}) pero no logro el comportamiento deseado. Por favor podrías orientarme sobre cuál evento y cuál elemento enfocarme. Agradezco de antemano tu atención.
13:19 Pero no se supone que document es un objeto aparte, y es hijo de window? Por qué el this hace referencia a window si se llama a flujoEventos desde document?
Profe, nos explica que no se le puede asignar un evento a un elemento que todavía no existe (un elemento que luego crearemos dinámicamente); ¿pero si le asignamos el evento luego de crear dicho elemento?, ¿o todos los Listener se ejecutan al cargar el documento?
Dos años despues de terminar el curso y habiendo conseguido trabajo gracias a vos, vuelvo aquí porque seguís siendo mi primer referencia para las dudas de JS
😉👋🏻
titán
Esta clase fue una de las mejores que llevamos del DOM, aparte de que ahorramos recursos, ahorramos mucho codigo y, personalmente, es mucho mas comoda y legible.
Ahora a seguir con el BOM!!
Dejo mis apuntes:
//*👉 La delegacion de los eventos no consiste en otra cosa que, por ejemplo cuando yo tengo 1000 divs no seria optimo agregarle el listener a cada vez, de igual manera no es optimo aunque lo hagamos con un ciclo como el forEach. Ya que estaria generando un listener a cada elemento, cuando yo podria tener el evento asignado a un elemento padre superior y a partir de ahi, buscando con un selector quien origino el evento, desencadenar la programacion que quiera al momento del evento
//*?💬 Imaginense que en un formulario que tenga 30 inputs y cada uno tenga validaciones. En vez de trabajar el evento onchange de cada input o el evento onblur, o el onfocus, el evento en cuestion se lo asignemos, en lugar de a esos 30 inputs, al formulario como tal. Incluso se podria asignar al documento raiz, que en este caso es el document.
//*🦊✅ Y el profe Jon aplico esta ultima forma cuando hace proyectos con vanilla JS al momento de ESQUEMAR el modelo de sus EVENTOS. Jon genera un listener 🌎GLOBAL para el DOCUMENT, es decir si tiene que activar con click, con el input submit, blur o todos los eventos asignados, se los pega al document y a partir de ahi DETECTA cual es el nodo que le INTERSA QUE ACTIVE EL EVENTO y DESENCADENA la programacion requerida. De tal menera que en lugar de tener 1000 listeners generados por el evento click, tiene un SOLO LISTENER generado al DOCUMENT y detecta cual es el evento que va a desencadenar esa accion del usuario
//!❕ Un detalle IMPORTANTE es que tambien vamos a EVITAR la PROPAGACION, entonces ya nosotros no tendriamos que estarla deteniendo, porque como el evento esta asignado al document ya NO necesitamos el trabajo que hace la mimsa
const $divsEventos = document.querySelectorAll(".eventos-flujo div"),
$linkEventos = document.querySelector(".eventos-flujo a");
function flujoEventos(e) {
console.log(
`Hola te saluda ${this}, el click lo originó ${e.target.className}`
);
}
document.addEventListener("click", e => {
console.log("Click en",e.target)
if(e.target.matches(".eventos-flujo div")) {
flujoEventos(e)
}
if(e.target.matches(".eventos-flujo a")) {
alert("Hola soy tu amigo y docente digital... Jonathan MirCha")
e.preventDefault()
}
})
//?🤔 Por que cuando nos referimos al this del evento que le asignamos al document nos aparece window? Porque se lo asignamos al document y en ese momento se esta refiriendo al objeto global, devuelve window ya que document cuelga de window y al estar colgada no hace falta aclararlo
//*✅✅ Con esta delegacion de eventos le ahorramos muchos recursos al navegador y mejoramos el rendimiento de nuestro programa, ya que en vez de agregarle un listener a cada elemento, asignamos uno por cada tipo de evento que queramos ejecutar
😉👍🏻
Gracias crack, si es muchisimo mas comodo que estar usando todo lo anterior la verdad:)
Jon, excelente explicación. La verdad que nos haz dado una herramienta increíble para optimizar recursos. Tus cursos son lo mejor de lo que he visto en las redes. Muchas gracias por todo.
👋🏻😉
Realmente Jon eres una persona que creía que no existía, el contenido de este curso es excelente y lo mas importante, no lo encontras en otro lado sin tener que pagar precios inaccesibles, trato de difundir el curso por todos lados, porque me cuesta entender como no tienes millones de seguidores.
Te agradezco por tu contenido, por tu esfuerzo, dedicación y por la paciencia en explicar para que no se te olvide ningun detalle. Eres realmente un genio
😉🙌🏻♥
Qué clase maestra diste en este video, es contenido único en youtube. Me alegra la manera en la que compartes tu conocimiento fruto de tu experiencia con todos nosotros. Si pudiera le daría 100 likes al video, quiero que sepas que comparto tus videos con mi clase completa, así que todos mis compañeros están enterados y más de uno está siguiendo este curso. Saludos!
🤗💛 Gracias !!
Con que facilidad se entienden las cosas y como la mente empieza a trabajar para futuros proyectos. Gracias Sr. Mircha
👋🏻😉
Se acabó colocar addeventlistener a todo... Solo al document y de allí puro if... Gracias Jon por compartir tan buen contenido!
A la orden
Mil gracias Jonathan, eres de los pocos que han mencionado este tema, las buenas prácticas las estoy aprendiendo de ti y de Dorian desings.
Porcierto veros a ti y a dorian en un directo, seria una bomba atómica de información.
Amino hermano, saludos desde África del Norte
👍🏻
Muy bueno, con estas explicaciones ahora lo veo todo tan fácil y tan lógico
😉👍🏻
Que bendición esta en información Muchas Gracias YON.......
👋🏻😉
¡ Esto es Simplemente una clase que vale ORO !. Nuevamente, Gracias Jon.
Con mucho gusto
Querido Jon. Desde Argentina te digo MARADONIANA clase !!!!! y MARADONIANO curso
😉
Maravilloso resume mucho el código
😉🔥
Hola Jon, muchas gracias; no sabia que fuera posible aplicar esta técnica, ésta clase me ha sido de gran ayuda; gran trabajo colega.
😉👍🏻
Delegación eventos es lo mejor que tiene JavaScript te soluciona muchas cosas y te permite hacer más cosas de igual manera 🙌🙌
🤓👍🏻
Excelente Profe, Gracias Infinitas.
Con mucho gusto
🧙♂Muchas gracias,muy buen curso!!!
Gracias a ti!
sept 11 1969**Nov 16 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos👋🏻😉
Excelente clase Jon, trucos que se aprenden....
Gracias, saludos
Justo lo que necesitaba. Muchísimas gracias
De nada!
Es de Ley! antes de ver el vídeo debe de tener su buen like... 💪💪
😉👍🏻
Clase Top Tier! Es un muy buen tip el que das en este video =D
👋🏻😉
Muy bueno el enfoque. No lo conocía y ahora comprendo cosas que antes se me escapaban. Muchas gracias...
De nada, comparte para llegar a más gente
@@jonmircha Me encuentro con un problema cuando la estructura html cuenta con muchos elementos hijo, nieto, bisnieto, etc porque en ese caso no me los detecta todos y tengo que estar jugando con la propiedad css pointer-events para que no detecte los que no me interesa...
Por ejemplo, yo quiero que me detecte el hijo y solo me detecta el elemento más profundo, entonces le aplico la propiedad pointer-events: none; a ese elemento para que no me lo detecte.
www.screenpresso.com/=G6Xgd
En esta captura, me detecta antes el último span (.et-pb-icon) que el elemento que yo quiero que detecte (.about__tabs__item, que ni siquiera lo detecta)
No sé si existe otra forma de hacerlo más efectiva y mejor, claro.
Gran clase, Jon! Muchas gracias!
Con mucho gusto
Master! Buenísimo el curso,Muchísimas graciass
😉🙌🏻
Impresionante clase Jon. No se para de aprender contigo. No me cansaré nunca de agradecerte por todo el conocimiento que pones al alcance de todos de forma gratuita. Saludos Jon.
👋🏻😃
De las mejores lecciones del curso y pocos llegan hasta acá, puro oro ❤
😉👋🏻
Gracias otra vez!!. Para mi el mejor curso de JavaScript de los que intentado hacer, el resto los dejé porque me quedaban muchas dudas.
👋🏻😉
sigo a muchos profesores y youtubers, aprendo muchísimo de varios, pero Jon, tu definitivamente eres excelente! Apenas pueda voy a suscribirme a alguna de tu membresías, te mereces éso y mucho más!
(ojalá tuvieras algún método de pago disponible para Argentina, MP, Payoneer, Cafecito o algo así, lamentablemente paypal se me hace imposible actualmente)
😉👋🏻
Me alegra que enseñes todo pero que al final recomiendes las buenas practicas. Gracias!
😉👍🏻
Hermosa clase!🤠
😉👋🏻
Excelente el tema de Delegación de Eventos. Gracias Jon!!
A la orden
Excelente! Gracias Jon, tremendo el curso, fascinado
De nada, comparte para llegar a más gente
UFFF quede encantado con la clase, muy útil y sobre todo aplicando la experiencia que tiene usted profesor....
Te admiro mucho Jon! Gracias por tan valioso material. :)
😉👋🏻
La funcion flujoEventos la pude hacer trabajar dentro del ambito de los div utilizando las call, apply, bind todo está relacionado con lo anteriormente dado, muy bueno!
Excelente observación, me dio mucha curiosidad cómo y me costo mucho pero lo pude hacer también jejeje
puedes compartirlo. me llama la atención eso... Saludos
ufff buenísimo Jonatan nunca me paso por la mente poner un addEventListener al document y controlar todos los eventos con target.matches eres un crack!!
😎👌🏻
Una clase magistral, como siempre.
😎👌🏻
el mejor curso de javascript, se aprende mucho con cada clase
Muchas gracias!
excelente vídeo Jon. Muchas Gracias!
👋🏻😉
Es encreible como puedes aprender todo con respecto a los evetos y una vez aprendidos nos muestres que hay una manera mas sencilla, no solo vas al punto sino te explayas y podemos conocer mas cosas, gracias por tanto♥.
Justamente conseguire unas practicas como programador y cuando me paguen te donare un taquito :D
👋🏻😉
Eres un superhéroe para muchos
🙈🙊
🥳🥳🥳🥳🥳🥳🥳🥳excelentisima clase maestro
Gracias por tu apoyo
Tremendo truco para aplicar eventos 😁Un saludo Jon Eres un gran maestro
👋🏻😉
Justamente estoy trabajando en un proyecto donde debo de "escuchar" acciones de varios elementos, aunque llegué a mejorar el código. Con ésta forma creo que me va a quedar incluso más fácil de organizar todo... Gracias profe!
👋🏻😉
Muy buena explicación, like y 1 suscriptor +
¡Muchas gracias! 👋🏻😉
Excelente video!
Gracias!
Genial!!!! muchisimas gracias Jonathan!!! Vale mucho todo lo que nos explicas.
Mi pc agradecerá el ahorro de memoria que aplicaré a partir de ahora gracias a este truco, muchas gracias de parte mia y de mi pc 😁😁
😀👌🏻
gracias excelente video
Gracias a ti
Muy bueno, da mucho valor agregado este video. Gracias por compartir tu trabajo Jon!
;)
Muchas gracias Jon ❤
Saludos!
Que gran forma de hacerlo busque y busque como acceder a los elementos de una Tabla, en todos lados dicen que hay que ponerle eventos a cada celda o fila, con este método y .closets puedo obtener la td a la que se le da click y todo el tr al que pertenece. Gracias por compartir tus conocimientos y saludos desde Tampico, Tam.
;) Saludos
Wao esto me va a servir mucho para factorizar el codigo ya que tengo un centenar de event listener
Que buen contenido Jon, eres y seras un grande por compartir este valioso conocimiento, de lo mejor en youtube la vdd
Muchas gracias!👍🏻
// 76. DOM: Delegación de Eventos
function flujoEventos(e) {
console.log(`Hola te saluda ${this}, el click lo originó ${e.target.className}`);
e.stopPropagation();
}
// En lugar de haber tenido 4 listeners, solamente tengo la asignación de un "listener" al evento click del nodo principal "document". Con esta técnica a parte de mejorar el rendimiento solamente estamos teniendo una sola asignación al evento "click". A través del condicional "if" evaluamos los eventos.
document.addEventListener("click", (e) => {
console.log("Click en", e.target);
if (e.target.matches(".eventos-flujo div")) {
flujoEventos(e);
}
if (e.target.matches(".eventos-flujo a")) {
alert("Hola soy tu amigo y docente digital... Jonathan MirCha");
e.preventDefault();
}
});
Buenísimo este vídeo. Un millón de gracias!!
Con mucho gusto
Excelente jon. Gracias...
Con gusto
Gracias crack!
De nada
Sólo puedo decir excelente
😉👋🏻
Tu explicando delegación de eventos, y yo viendo una oportunidad de revisar código de paginas web para aprender un poco mas solamente dando click jajajaj.
Jon de verdad que tus clases son geniales, y los comentarios de tus alumnos digitales motivan cada día más a seguir aprendiendo de tu mano....Bendiciones🧙♂️🧙♂️🧙♂️
Gracias por tus bendiciones 😉🙌🏻
Like 1500 xd
la mejor clase de todas en esta sección
😉👍🏻
le había dado poca importancia a este vídeo antes, pero es fundamental
yep 🧔🏻👌🏻
GRACIAS
Gracias por comentar
jon eres lo maximo, ;)
🙈
Así le puedo quitar el evento por defecto a todos los " a ", esto es muy útil, muchas gracias
😉👍🏻
un crack jon mircha
🙈
Ingeniero Jonathan, me gustaría saber ¿Cómo se haría en el caso de que fuesen demasiados elementos a los que asignar eventos? ¿Podría ser asignándole los nombres de los elementos a un arreglo ? Pero entonces ¿cómo se le asignarían los if de cada elemento? ¿Se podría crear un módulo aparte con el arreglo para eso? O ¿cómo sería?
Otra forma de agregar los eventos a los elementos generados dinamicamente con base en datos obtenidos con la api fetch ó ajax es generar los respectivos addEventListeners en una Template String y ejecutar ese código con la función eval, luego de generar los elementos dinamicamente. Aunque me parece mas optimo como lo presenta en este video.
Sí no es muy segura esa opción 👋🏻😉
Vaya muy bueno.
hola Jon, no se si tienes un video donde se explica la diferencia y casos de uso entre las propiedades target y currenTarget, dentro la delegacion de eventos . Saludos...
buen video Profe cual es el video que menciona en el minuto 15:21 donde habla de aplicar delegacion a elementos que vienen dinamicos ?
Son los cvideos de la sección de AJAX
Hola jon, en el minuto 12:36 se imprime [object Window] porque al usar la función flecha en el eventListener, "this" pasa a hacer referencia al elemento padre de document (= Window) ??
Sí
en ves de usar matches tambien se puede usar className para comprobar si la clase existe o classList.containst('clase') para comprobar si la clase tambien existe , cieerto?? o en todo caso si coincide hasta con su id , event.target.id == 'idElement'
La ventaja de matches es que puedes validar cualquier selector
@@jonmircha acabo de hacer el ejercicio de el menu hamburgesa de la clase 81 y no me funcionó con nunguna de las opciones que di acá pero con matches si funcionó , por que será ? que raro
👏👏👏
Disculpa, jon. Una pregunta ¿Es recomendable usar sentencias return al final de cada if en la delegación de eventos?
Muy buen video Profe!! , solo una pregunta , cuando dijiste el ejemplo de peticiones con ajax , se podria usar las promesas para agregar un evento de forma asincrona , osea agregarle el evento con promesas cuando ya el contenido html este cargado?
Sí se podría pero mejor usa la delegación
Jon, me quedó solo una duda. ¿Al trabajar los eventos de esta manera, hay que usar solo los selectores del tipo class?
Ya que los id no es conveniente que se repitan y usar solo selectores de etiquetas nos harían perder el control si nuestro código crece y esas etiquetas se repiten.
EDIT: Acabo de leer "Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase..."
Pensaba que las clases eran exclusivas, o una buena práctica, solo usarlas con CSS :D
Puedes usar cualquier tipo de selector
Buenas tardes profe! Quisiera hacerle unas preguntas.
Averiguando un poco encontré sobre la existencia de motores de plantillas como "Handlebars" y Frameworks como "Angular"
¿Con que es mas recomendable trabajar (ya sea por comodidad o tiempo) JavaScript Vanilla; JavaScript con Motor de Plantilla o con un Framework como Angular? ¿Y porque?
Aun soy nuevo en todo esto, por eso le pregunto a usted que sabe mucho mas y quizás pueda guiarme un poco.
Desde ya, muchísimas gracias y disculpe por las molestias
Depende de la complejidad, del proyecto, pero lo que si es importante es que antes de trabajar con un framework como Anguar, React o Vue, domines JS
Maestro Jon lo de la delegación de eventos al DOM y se ejecute en elementos de una api que todavia no ha cargado, se puede solucionar los errores de consola metiendo todas las acciones dentro de un evento padre por asi decirlo que tenga un condicional que verifique primero si los eventos de la Api ya cargaron?
Sí, así se solucionan ese tipo de errores
Profe una consulta, ¿si quiero un elemento div en específico y no precisamente cualquier div que exista? He estado intentando pero no me ha quedado. Y ya preferí mejor preguntar.
Digamos el div en la posición 2.
O si tenemos 10 figure, no quiero que aplique a cada figure, sino solamente a la 5 por ejemplo.
Ponle una clase o id y así lo detectas
Muy buena clase, no entiendo los 3 dislike, serán la competencia?
¯\_(ツ)_/¯
Prof repasando conceptos, pienso pasar una app que hice en react a vanilla js, su filosofía de que mientras se pueda es mejor vanilla js prurito... La estoy practicando.. Nuevamente gracias por tanto Jon!!
😮😎👍🏻
Buenas tardes. Profesor, por que dentro del oyente document que llama a la función addEventListener(), no funciona el llamado del método call(), que haga la función llamada para desarrollar las acciones del evento en cuyo interior usa “this”? Cuando llamo el metodo call(), le paso por parámetro el objeto {
if(e.target.matches('.eventos-flujo div')){
flujoEventos.call($divsEventos, e)
}
})
Considerando que la función que desarrolla las acciones del evento es esta:
function flujoEventos (e){
console.log(`Hola te saluda ${this.className},
el click lo originó ${e.target.className}`)
}
Usa una function normal en vez de arrow ;)
Hola Jon! a ver si entendi bien, cuando usamos this en una función declarada, ese this hace referencia al scope superior al ámbito en el cual se declara, por lo que windows que está por encima de document es al que se le hace referencia, es así?
sí Window es el padre de todo es el Zeus del navegador Web
🤪🤭🤣🤣
12:58 que es lo que presionas para deshacer el código así de rápido?
Nada, es el autocompletado de VSCode, cundo se te quita lo puedes activar con ctrl + barra espaciadora, pero sale por sí sólo
Hola Jon espero estés bien, tengo una duda !. Entonces se aplicaria la delegacion de eventos siempre que se pueda incluyendo en aplicaciones pequeñas o solamente cuando sean aplicaciones grandes que requieren mas demanda de recursos e interaccion con el DOM ?, nuevamente te doy gracias por estos cursos Jon !
Puedes usarla en ambos casos ;)
Hola Jon, tendremos un listener por cada evento que vayamos a usar?
Sí, por ello la importancia del tema de la delegación de eventos que vemos en este video ;) en vez de tener n... listener, tenemos uno y lo activamos depende del selector que nnecesitemos
Hola! con un listener para el document, no hay necesidad de utilizar el 'removeEventListener' para liberar la memoria en algún momento?
No
Me quedó una duda del video, ¿al manejar de esta manera los eventos no hay que evitar que cada que un usuario haga "click" en una parte del documento se ejecute un "addEventListener"? (cuando daba click en el body activaba un "addEventListener"), ¿eso no afecta el rendimiento?
para eso es el e.target.matches() para accionar el evento sólo con los elementos requeridos
@@jonmircha Gracias profe, me despiste con eso :)
Saludos.
Es mas optimo asignar siempre el addEventListener al body, o es preferible hacerlo a un elemento superior que contenga los elementos hijos que deberían disparar ese evento???
Es igual, mientras exista el elemento en el momento que carga el DOM, puedes usar cualquier elemento padre, pero yo prefiero hacerlo al document :) con eso me evito la falla, ya que es el objeto padre del dom
@@jonmircha saludos jon gracias por ti respuesta.. lo tendré en cuenta.. ahora te pregunto, solo usas la delegacion de eventos cuando tienes que asignar el evento a muchos elementos o lo usan en cualquier caso? Aun cuando sean poco o un solo elemento?
De preferencia siempre la uso
Buenas! Tengo una duda que me esta matando, espero puedas verla y aclararme mas del tema jajaja. Mi pregunta es si puedo activar la propagación de eventos cuando utilizo document.addEventListener... Por si no me expliqué bien quiero decir: creo varios div de manera dinámica y quiero que al seleccionar uno me muestre los div que le siguen hasta llegar al div padre y realizar una acción con ellos (teniendo en cuenta que estoy haciendo click en el documento). Desde ya muchas gracias! Buen video, solo quede con esa pequeña duda. Un genio profe
Sí claro, justamente para eso es la delegación de eventos
Hola jon, cual es la diferencia entre classList.constains("") y matches(""), los dos validas a true no?
contain sólo evalua si existe una clase, matches evalua cualquier selector valido de CSS
con el evento submit seria igual o cambia en algo?
con todos los eventos la delegación es igual
@@jonmircha Ya pude hacerlo, no podia por que me faltaba poner como parametro el evento, gracias jon!!!
Maestro MirCha, quiero detectar cuando el visitante quiera salir de la página para lanzar un modal con una encuesta sobre la experiencia al visitar el sitio. He intentado con window.addEventListener("beforeUnload", function(){…}) pero no logro el comportamiento deseado. Por favor podrías orientarme sobre cuál evento y cuál elemento enfocarme. Agradezco de antemano tu atención.
Cerrando la ventana o pestaña lo veo muy dificil de controlar, pero quiza cuando el usuario cambie la url de la barra de direcciones puedas hacerlo
@@jonmircha muchísimas gracias. Entones intentaré con el cambio de URL. Gracias por la pronta respuesta, que pases un excelente día. Saludos!!
Lo bueno: clase épica, lo malo: reestructurar el proyecto que acabo de comenzar u.u
😉
13:19 Pero no se supone que document es un objeto aparte, y es hijo de window? Por qué el this hace referencia a window si se llama a flujoEventos desde document?
👏👏👏 🙏🙏🙏
👋🏻😉
moooy bueno
Profe, nos explica que no se le puede asignar un evento a un elemento que todavía no existe (un elemento que luego crearemos dinámicamente); ¿pero si le asignamos el evento luego de crear dicho elemento?, ¿o todos los Listener se ejecutan al cargar el documento?
es preferible que se carguen a a carga de dom para ello el uso de la delegación de eventos