{"id":845,"date":"2024-07-31T07:44:18","date_gmt":"2024-07-31T05:44:18","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=845"},"modified":"2024-07-31T07:44:18","modified_gmt":"2024-07-31T05:44:18","slug":"015-dom-flujo-de-eventos-burbuja-y-captura","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/015-dom-flujo-de-eventos-burbuja-y-captura\/","title":{"rendered":"015. DOM: Flujo de Eventos (Burbuja y Captura)"},"content":{"rendered":"\n

En este cap\u00edtulo veremos como trabaja Javascript<\/strong> con los eventos<\/strong>. El m\u00e9todo addEventListener()<\/em><\/strong> dispone de un tercer par\u00e1metro que nos permite elegir el tipo de flujo<\/strong> que deseamos (burbuja<\/strong> o captura<\/strong>), y es lo que vamos a trabajar en este cap\u00edtulo.<\/p>\n\n\n\n\n\n\n\n

El flujo de eventos<\/strong> es la manera mediante la cual se propaga dicho evento<\/strong>. Una vez que un evento<\/strong> se origina, tiene una propagaci\u00f3n<\/strong> a lo largo del \u00e1rbol del DOM<\/strong>, por defecto, dicha propagaci\u00f3n<\/strong> se va dando del elemento m\u00e1s interno al mas externo, que es el documento, y esa fase es denominada fase de burbuja<\/strong>, que es el esquema por defecto que los navegadores soportan, de hecho no hay que hacer nada a nuestros manejadores m\u00faltiples<\/strong> para que funcione esta fase de burbuja<\/strong>.<\/p>\n\n\n\n

Funcionamiento de la fase de captura<\/h2>\n\n\n\n

En los cap\u00edtulos anteriores estuvimos asignando eventos<\/strong> de manera individual a cada uno de los botones, pero imaginemos que en una interfaz din\u00e1mica, dicha botonera se forma a partir de un cat\u00e1logo que tengamos en una base de datos, por lo que tenemos que ir a consultar la base de datos, imprimir un bot\u00f3n por cada registro que venga de la base de datos, y a ese bot\u00f3n asignarle din\u00e1micamente un evento<\/strong>, para lo que tendr\u00edamos que asignar dinamicamente el evento<\/strong> a todos los elementos.<\/p>\n\n\n\n

Veamos un ejm para entender todo de mejor manera.<\/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\">\n  1\n  <div class=\"dos\">\n   2\n   <div class=\"tres\">\n     3\n   <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<script>\nconst $divEventos = document.querySelectorAll(\".eventos-flujo div\");\nconsole.log($divEventos);\n\/\/ Devuelve un nodeList\n\n\/\/ Vamos a crear previamente la funci\u00f3n flujoEventos\n\/\/ de donde va a tirar nuestro bucle forEach\nfunction flujoEventos(e) {\nconsole.log(\"Hola\")\n}\n\n$divEventos.forEach(div => {\ndiv.addEventListener(\"click\", flujoEventos);\n});\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Cuando hago clic al div3, internamente la div3 est\u00e1 dentro de la div2 y de la div1, y como los 3 elementos tienen asignado ese evento clic, ah\u00ed vemos la propagaci\u00f3n, la div3 imprimir\u00e1 en consola 3 veces Hola, la div2 lo har\u00e1 dos veces, y la div1 lo har\u00e1 \u00fanicamente una vez.<\/p>\n\n\n\n
Vamos a cambiar la funci\u00f3n flujoEventos()<\/em> con la siguiente sintaxis.<\/p>\n\n\n\n
function flujoEventos(e) {\n  console.log(`Hola, te saluda ${this.className}, el clic\nlo origin\u00f3 ${e.target.className}`)\n}<\/pre>\n\n\n\n
A esto se le denomina la fase de burbuja<\/strong>, porque va del elemento m\u00e1s interno, que tiene asociado el evento<\/strong>, hacia el m\u00e1s externo.<\/p>\n\n\n\n
La funci\u00f3n addEventListener()<\/em><\/strong> tiene un tercer par\u00e1metro opcional, que son una serie de opciones:<\/p>\n\n\n\n
    \n
  • false<\/em><\/strong>: estamos en fase de burbuja<\/strong>, por lo tanto, el flujo de los eventos<\/strong> se propaga desde el m\u00e1s interno hasta el m\u00e1s externo dentro del \u00e1rbol del DOM<\/strong>.<\/li>\n\n\n\n
  • true<\/em><\/strong>: origina la fase de captura<\/strong>, la cual va de los eventos<\/strong> m\u00e1s externos hasta el elemento m\u00e1s interno.<\/li>\n<\/ul>\n\n\n\n
    Fase de burbuja<\/h2>\n\n\n\n
    La sintaxis de nuestra funci\u00f3n manejadora addEventListener()<\/em><\/strong>  ser\u00eda la siguiente.<\/p>\n\n\n\n
    div.addEventListener(\"click\", flujoEventos);\n\/\/ O bien\ndiv.addEventListener(\"click\", flujoEventos, false);<\/pre>\n\n\n\n
    Fase de captura<\/h2>\n\n\n\n
    div.addEventListener(\"click\", flujoEventos, true);<\/pre>\n\n\n\n
    En la pr\u00e1ctica, normalmente no se utiliza este tercer par\u00e1metro de la funci\u00f3n addEventListener()<\/em><\/strong>. En foros de dise\u00f1o web se comenta que cuando la estructura del DOM<\/strong> tiene muchos elementos, existen comprobaciones matem\u00e1ticas las cuales dicen que en este tipo de elementos concatenados donde tenemos el mismo evento<\/strong> asociado a elemento padre, hijo, nieto… es decir, que se tenga que propagar el evento<\/strong>, funciona mejor la fase de captura que la de burbuja, es m\u00e1s \u00f3ptima, ya que no consume tanta memoria.<\/p>\n\n\n\n
    Tanto fase de captura<\/strong> como de burbuja<\/strong> la podemos omitir si delegamos los eventos<\/strong> a un elemento padre mas externo, lo que ayudar\u00e1 a mejorar el rendimiento de la memoria y los recursos que nuestra aplicaci\u00f3n ocupe en el navegador.<\/p>\n\n\n\n
    Adicionales<\/h2>\n\n\n\n
    Sobre el tercer par\u00e1metro, adem\u00e1s de tener true<\/em><\/strong> o false<\/em><\/strong>, tenemos otras palabras reservadas.<\/p>\n\n\n\n
      \n
    • Podemos pasar un objeto al que le podemos pasar las siguientes propiedades\n
        \n
      • capture<\/em><\/strong>: esta propiedad hace referencia a si la fase es de burbuja o de captura, dependiendo de si el valor que asignamos a esta propiedad es false o true.<\/li>\n\n\n\n
      • once<\/em><\/strong>: si lo activamos a true, nuestro evento se va a ejecutar una s\u00f3la vez, si lo activamos a false se ejecutar\u00e1 siempre<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
        La sintaxis de nuestro addEventListener()<\/em><\/strong> ser\u00eda la siguiente:<\/p>\n\n\n\n
        div.addEventListener(\"click\", flujoEventos, {\ncapture: (true \/ false),\nonce: (true \/ false),\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"
        En este cap\u00edtulo veremos como trabaja Javascript con los eventos. El m\u00e9todo addEventListener() dispone de un tercer par\u00e1metro que nos permite elegir el tipo de flujo que deseamos (burbuja o captura), y es lo que vamos a trabajar en este cap\u00edtulo.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":14,"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-845","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 este cap\u00edtulo veremos como trabaja Javascript con los eventos. El m\u00e9todo addEventListener() dispone de un tercer par\u00e1metro que nos permite elegir el tipo de flujo que deseamos (burbuja o captura), y es lo que vamos a trabajar en este cap\u00edtulo.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/845","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=845"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/845\/revisions"}],"predecessor-version":[{"id":847,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/845\/revisions\/847"}],"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=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}