{"id":852,"date":"2024-07-31T07:47:35","date_gmt":"2024-07-31T05:47:35","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=852"},"modified":"2024-07-31T07:47:35","modified_gmt":"2024-07-31T05:47:35","slug":"017-delegacion-de-eventos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/017-delegacion-de-eventos\/","title":{"rendered":"017. Delegaci\u00f3n de eventos"},"content":{"rendered":"\n

En cap\u00edtulos anteriores hemos estado viendo conceptos importantes como son la declaraci\u00f3n de los eventos<\/strong>, como remover, como pasar par\u00e1metros<\/strong> cuando lo necesitemos, como detener el flujo de la propagaci\u00f3n<\/strong> dependiendo si tenemos la fase de burbuja<\/strong> o captura<\/strong>.<\/p>\n\n\n\n\n\n\n\n

A d\u00eda de hoy vamos a ver un concepto muy importante, utilizado por librer\u00edas como React<\/strong>, Vue<\/strong>, Angular<\/strong>.. que es como manejan el esquema de los eventos<\/strong>, y esto optimiza mucho a nivel de recursos y de memoria nuestras aplicaciones, y se trata de la delegaci\u00f3n de los eventos<\/strong>.<\/p>\n\n\n\n

Que es la delegaci\u00f3n de eventos<\/h2>\n\n\n\n

En vez de asignar listeners<\/strong> a todos los elementos, podemos tener el listener<\/strong> asignado a un elemento padre superior, y a partir de ah\u00ed, simplemente, buscando el selector que coincida para ver quien origin\u00f3 el evento<\/strong>, desencadenar la programaci\u00f3n que necesitemos al momento del evento<\/strong>. Por ejm, en un formulario complejo, con muchos inputs<\/em><\/strong>, en lugar de asignar el evento<\/strong> a cada input<\/em><\/strong>, asign\u00e1rselo al formulario como tal, e incluso ir un paso m\u00e1s, y se podr\u00eda asignar el evento<\/strong> al nodo ra\u00edz<\/strong>, que en este caso es el document<\/em><\/strong>, que es lo que en muchos casos se est\u00e1 haciendo en la actualidad. Se genera un listener<\/strong> global<\/strong> para el document<\/em><\/strong>, todos los eventos<\/strong> los pegamos al document<\/em><\/strong>, y a partir de ah\u00ed detectamos cual es el nodo<\/strong> que nos interesa que active el evento<\/strong>, y desencadenamos la programaci\u00f3n, de tal manera que en lugar de tener muchos listeners<\/strong> generados al evento<\/strong> click<\/em><\/strong>, tenemos un s\u00f3lo listener<\/strong> generado al document<\/em><\/strong>, y simplemente detectamos cual es el elemento que va a desencadenar el evento.<\/p>\n\n\n\n

La delegaci\u00f3n de eventos<\/strong>, por otro lado evita la propagaci\u00f3n<\/strong>, ya no tenemos que estar deteniendo la propagaci\u00f3n<\/strong>, porque ya el evento<\/strong> est\u00e1 asignado al nodo superior<\/strong> que es el document<\/em><\/strong>.<\/p>\n\n\n\n

Lo vamos a ver con un ejm.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Flujo de eventos<\/title>\n<style>\n.eventos-flujo div {\npadding: 4rem;\nfont-size: 2rem;\ntext-align: center;\n}\n\n.uno {\nbackground-color: yellow;\n}\n\n.dos {\nbackground-color: gold;\n}\n\n.tres {\nbackground-color: lightyellow;\n}\n<\/style>\n<\/head>\n<body>\n<h1>Flujo de eventos<\/h1>\n<section class=\"eventos-flujo\">\n<div class=\"uno\">\n1\n<div class=\"dos\">\n2\n<div class=\"tres\">\n3\n<a href=\"https:\/\/sutilweb.eu\" target=\"_blank\" rel=\"noopener\">Sutil Web<\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n<script>\n\/\/ Vamos a crear previamente la funci\u00f3n flujoEventos\n\/\/ de donde va a tirar nuestro bucle forEach\nfunction flujoEventos(e) {\nconsole.log(`Hola, te saluda ${this}, \nel clic lo origin\u00f3 ${e.target.className}`); \n}\n\ndocument.addEventListener(\"click\", (e) => {\nconsole.log(\"Click en\", e.target);\n\nif(e.target.matches(\".eventos-flujo div\")) {\nflujoEventos(e);\n}\n\n\/* Buscar la coincidencia en un condicional\ny dentro del condicional ejecutar la programaci\u00f3n\nque necesitemos para cada elemento del DOM al que \ntengamos que asignar el evento click *\/\nif(e.target.matches(\".eventos-flujo a\")) {\nalert(`Hola, soy Francisco Paredes`);\ne.preventDefault();\n}\n})\n<\/script>\n<\/body>\n<\/html<\/pre>\n\n\n\n
Como podemos ver, el c\u00f3digo se vuelve m\u00e1s sencillo. Con esta t\u00e9cnica, a parte de mejorar el rendimiento a nivel de memoria<\/strong> y de recursos<\/strong>, de nuestras aplicaciones, solamente estamos teniendo una sola asignaci\u00f3n al evento click<\/em><\/strong>, y la programaci\u00f3n que necesitemos ejecutar en cada uno de los elementos del DOM<\/strong> que haya que programar, lo hacemos con un condicional el cual va evaluando que coincida el selector con el que queremos que ese elemento aplique la programaci\u00f3n.<\/p>\n\n\n\n
Esta t\u00e9cnica es muy importante en peticiones as\u00edncronas<\/strong>, es decir, cuando utilizamos Ajax<\/strong> o Fetch<\/strong> y generamos elementos din\u00e1micos.<\/p>\n\n\n\n
\n
Nota<\/strong>: esta es la manera m\u00e1s \u00f3ptima de trabajar con los eventos<\/strong> en Javascript<\/strong>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
En cap\u00edtulos anteriores hemos estado viendo conceptos importantes como son la declaraci\u00f3n de los eventos, como remover, como pasar par\u00e1metros cuando lo necesitemos, como detener el flujo de la propagaci\u00f3n dependiendo si tenemos la fase de burbuja o captura.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":16,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-852","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En cap\u00edtulos anteriores hemos estado viendo conceptos importantes como son la declaraci\u00f3n de los eventos, como remover, como pasar par\u00e1metros cuando lo necesitemos, como detener el flujo de la propagaci\u00f3n dependiendo si tenemos la fase de burbuja o captura.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/852\/revisions"}],"predecessor-version":[{"id":854,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/852\/revisions\/854"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/800"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}