{"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 […]<\/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 […]","_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}]}}