{"id":839,"date":"2024-07-31T07:41:59","date_gmt":"2024-07-31T05:41:59","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=839"},"modified":"2024-07-31T07:41:59","modified_gmt":"2024-07-31T05:41:59","slug":"013-dom-manejadores-de-eventos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/013-dom-manejadores-de-eventos\/","title":{"rendered":"013. DOM: Manejadores de Eventos"},"content":{"rendered":"\n

En los cap\u00edtulos anteriores hemos estado viendo como manipular el DOM<\/strong>, hemos visto como recorrer los elementos<\/strong>, las diferentes t\u00e9cnicas y m\u00e9todos<\/strong> que tenemos para poder acceder, modificar los estilos<\/strong>, el HTML<\/strong>, colocar e insertar un nuevo elemento en diferentes posiciones, guardar elementos en una variable.<\/p>\n\n\n\n\n\n\n\n

Una de las principales razones por las que fue creado Javascript<\/strong> a finales de la d\u00e9cada de los 90 es por la interacci\u00f3n, que es lo que vamos a comenzar a ver en este cap\u00edtulo.<\/p>\n\n\n\n

A partir de este cap\u00edtulo comenzaremos a ver los eventos<\/strong>.<\/p>\n\n\n\n

Que son los eventos<\/h2>\n\n\n\n

Los eventos<\/strong> son aquel mecanismo que tenemos en Javascript<\/strong> para poder controlar las acciones del usuario<\/strong> y definir ciertos comportamientos del documento para que sucedan en cierto momento o se cumplan algunas condiciones.<\/p>\n\n\n\n

Las funciones<\/strong> que se ejecutan en un evento<\/strong> es lo que en ingl\u00e9s se conoce como event handler<\/strong> o manejador de eventos<\/strong>, tambi\u00e9n denominados observadores<\/strong> o escuchadores de eventos<\/strong>.<\/p>\n\n\n\n

Maneras de definir los eventos<\/h2>\n\n\n\n

Hay 3 maneras de definir los eventos<\/strong> en Javascript<\/strong>. Podemos ir a la p\u00e1gina de MDN<\/strong><\/a> y buscar la palabra event<\/strong> para ver toda la documentaci\u00f3n acerca de los eventos<\/strong>.<\/p>\n\n\n\n

En este curso veremos los eventos<\/strong> m\u00e1s importantes, pr\u00e1cticamente hay eventos<\/strong> para todo. Las formas que tenemos para definir los eventos son:<\/p>\n\n\n\n

1. Evento pasado como atributo en una etiqueta HTML<\/h2>\n\n\n\n

no es la forma mas recomendada. Para que funcione como atributo<\/strong>, tan s\u00f3lo hay que invocarlo de manera sem\u00e1ntica, con la palabra on- seguida del nombre del evento.<\/p>\n\n\n\n

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

<button onclick=\"alert('Hola')\">Evento con atributo HTML<button>\n<button onclick=\"holaMundo()\">Evento con atributo HTML<button><\/pre>\n\n\n\n
A la funci\u00f3n que le hemos pasado al evento se ha transformado en una funci\u00f3n manejadora del evento<\/strong>, mediante la cual podemos acceder a un objeto especial que es el evento<\/strong> en s\u00ed, y a ello podemos acceder con la palabra reservada event<\/em><\/strong>.<\/p>\n\n\n\n
2. Como un manejador de eventos: vamos a ver un ejm para entender el proceso.<\/h2>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<button id=\"evento-semantico\">Evento con manejador sem\u00e1ntico<\/button>\n<script>\n  const holaMundo = function() {\n  const $p = document.createElement(\"p\");\n  $p.textContent = \"Hola Mundo\";\n  document.body.appendChild($p);\n  console.log(event)\n}\n\nconst $eventoSemantico = document.getElementById(\"evento-semantico\");\n\/\/ No se ponen los par\u00e9ntesis pq sino se ejecutar\u00eda la funci\u00f3n\n$eventoSemantico.onclick = holaMundo;\n<\/script><\/pre>\n\n\n\n
\n
Nota: Cuando definimos un evento<\/strong> como si fuera sem\u00e1ntico<\/strong>, simplemente igualamos el evento sem\u00e1ntico<\/strong> al nombre de la funci\u00f3n<\/strong> pero sin los par\u00e9ntesis<\/strong>, porque los par\u00e9ntesis har\u00edan que la funci\u00f3n<\/strong> se ejecutase inmediatamente.<\/p>\n<\/blockquote>\n\n\n\n
Como podemos ver en el ejm de arriba, una misma funci\u00f3n puede servir para desencadenar eventos<\/strong> en diferentes elementos<\/strong>.<\/p>\n\n\n\n
Inconvenientes de los eventos sem\u00e1nticos<\/h3>\n\n\n\n
Los eventos sem\u00e1nticos tienen un inconveniente. Va a haber veces donde a un mismo elemento HTML<\/strong> tengamos que asignar diferentes manejadores de eventos<\/strong>, es decir, diferentes funciones<\/strong> que pueden hacer diferentes cosas. La limitante que tienen los tipos de eventos sem\u00e1nticos<\/strong> es que, una vez que hemos definido el evento sem\u00e1ntico<\/strong>, s\u00f3lamente va a poder ejecutar una s\u00f3la funci\u00f3n<\/strong>.<\/p>\n\n\n\n
Toda funci\u00f3n<\/strong> que se convierte en un manejador de eventos sem\u00e1ntico<\/strong> no puede recibir par\u00e1metros<\/strong>, el \u00fanico par\u00e1metro<\/strong> que recibe es el evento en s\u00ed. Le podemos incluir como par\u00e1metro event<\/em><\/strong>, o bien simplificar el nombre con lo que los desarrolladores suelen usar, y es la palabra e<\/em><\/strong>. que representa el evento<\/strong>, como muestra el siguiente ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<button id=\"evento-semantico\">Haz clic<\/button>\n<script>\n   const $eventoSemantico = document.getElementById(\"evento-semantico\");\n   $eventoSemantico.onclick = function(e) {\n     alert(\"Esto es un evento sem\u00e1ntico\");\n     console.log(e);\n     \/\/ Mostrar\u00eda lo mismo\n     console.log(event);\n   }\n<\/script><\/pre>\n\n\n\n
3. Manejadores m\u00faltiples<\/h2>\n\n\n\n
si tenemos la necesidad de definir diferentes funciones<\/strong> a un mismo elemento. Para ello tenemos los manejadores m\u00faltiples<\/strong>, en los cuales vamos a utilizar un m\u00e9todo denominado addEventListener()<\/em><\/strong> que es el que permite levantar un manejador de eventos. addEventListener()<\/em><\/strong> puede recibir varios par\u00e1metros<\/p>\n\n\n\n
Veamoslo en un ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<button id=\"evento-multiple\">Evento con manejador m\u00faltiple<\/button>\n\n<script>\n  const $eventoMultiple = document.getElementById(\"evento-multiple\");\n\n  $eventoMultiple.addEventListener(\"click\", holaMundo);\n  \/\/ Solo nombramos la funci\u00f3n que debe de estar declarada,\n  \/\/ sin los par\u00e9ntesis\n  $eventoMultiple.addEventListener(\"click\",()=>{\n    alert(\"Manejador de eventos m\u00faltiple\");\n    console.log(e);\n    console.log(e.type); \/\/ El tipo de evento\n    console.log(e.target); \/\/ El evento que lo origina\n  });\n<\/script><\/pre>\n\n\n\n
Como podemos ver, cuando utilizamos manejadores sem\u00e1nticos<\/strong>, solo pueden ejecutar una funci\u00f3n<\/strong>, mientras que son los manejadores m\u00faltiples<\/strong> se pueden ejecutar varias funciones<\/strong> a un mismo elemento para un mismo evento.<\/p>\n\n\n\n
Resumen<\/h2>\n\n\n\n
En este cap\u00edtulo hemos visto 3 formas de trabajar con los eventos<\/strong>.<\/p>\n\n\n\n
    \n
  • Evento<\/strong> como si fuera un atributo del HTML<\/strong>.<\/li>\n\n\n\n
  • Evento<\/strong> como manejador sem\u00e1ntico<\/strong>, los cuales s\u00f3lo pueden ejecutar una funci\u00f3n<\/strong>.<\/li>\n\n\n\n
  • Evento<\/strong> como manejador m\u00faltiple<\/strong> utilizando el m\u00e9todo addEventListener()<\/em><\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    En los cap\u00edtulos anteriores hemos estado viendo como manipular el DOM, hemos visto como recorrer los elementos, las diferentes t\u00e9cnicas […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":12,"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-839","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 los cap\u00edtulos anteriores hemos estado viendo como manipular el DOM, hemos visto como recorrer los elementos, las diferentes t\u00e9cnicas […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/839","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=839"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/839\/revisions"}],"predecessor-version":[{"id":841,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/839\/revisions\/841"}],"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=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}