En el cap\u00edtulo anterior ve\u00edamos las 3 formas que existen para poder declarar un evento:<\/p>\n\n\n\n\n\n\n\n
En este cap\u00edtulo vamos a ver como remover eventos<\/strong>, y como hacer cuando necesitemos pasar par\u00e1metros<\/strong> a la funci\u00f3n manejadora<\/strong> del evento<\/strong>.<\/p>\n\n\n\n En el cap\u00edtulo anterior dijimos que una funci\u00f3n<\/strong> que se ejecuta en un evento<\/strong> se le conoce como event handler<\/strong> o manejador de eventos<\/strong>, en la cual hay una regla muy importante, cualquier funci\u00f3n<\/strong> que se ejecute en un evento<\/strong> s\u00f3lo puede recibir como par\u00e1metro el evento en s\u00ed, no se le pueden pasar m\u00e1s par\u00e1metros a una funci\u00f3n manejadora de eventos<\/strong>, pero qu\u00e9 ocurre si tenemos la necesidad de cuando una funci\u00f3n<\/strong> se ejecute en un evento<\/strong>, pasar par\u00e1metros<\/strong> porque necesitamos trabajar dichos par\u00e1metros<\/strong>, lo podemos hacer, de una manera que enga\u00f1amos algo al DOM<\/strong> del navegador.<\/p>\n\n\n\n Lo que vamos a hacer es en vez de incluir directamente la funci\u00f3n que queremos ejecutar, vamos a utilizar una arrow function<\/strong>, dentro de la cual s\u00ed que vamos a incluir la funci\u00f3n<\/strong> que queremos ejecutar.<\/p>\n\n\n\n Veamoslo en un ejm.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Por tanto, para poder pasar par\u00e1metros<\/strong> a una funci\u00f3n manejadora<\/strong>, envolvemos dicha funci\u00f3n<\/strong> en una arrow function<\/strong> a la cual le pasamos la funci\u00f3n<\/strong> que queremos ejecutar, con los par\u00e1metros que necesitemos. Como quien va a estar recibiendo el evento es la arrow function<\/strong>, no tenemos ning\u00fan problema y no nos va a dar ning\u00fan error.<\/p>\n\n\n\n Al igual que disponemos de una funci\u00f3n<\/strong> llamada addEventListener()<\/em><\/strong>, tenemos otra funci\u00f3n<\/strong> llamada removeEventListener()<\/em><\/strong> que lo que hace es remover el evento<\/strong> asociado. Veamos un ejm para entender su funcionamiento.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n En el cap\u00edtulo anterior ve\u00edamos las 3 formas que existen para poder declarar un evento:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-842","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 el cap\u00edtulo anterior ve\u00edamos las 3 formas que existen para poder declarar un evento:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/842","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=842"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/842\/revisions"}],"predecessor-version":[{"id":844,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/842\/revisions\/844"}],"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=842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Pasar par\u00e1metros a una funci\u00f3n manejadora<\/h2>\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>Eventos con par\u00e1metros<\/title>\n<\/head>\n\n<body>\n <h1>Eventos con par\u00e1metros<\/h1>\n <button id=\"evento-multiple\">Haz clic<\/button>\n\n<script>\n const $eventoMultiple = document.getElementById(\"evento-multiple\");\n\n function saludar(nombre = \"Desconocido\") {\n alert(`Hola ${nombre}`);\n }\n\n$eventoMultiple.addEventListener(\"click\", () => {\n saludar(\"Pedro\");\n});\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\nEliminar eventos<\/h2>\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>Eliminar eventos<\/title>\n<\/head>\n\n<body>\n <h1>Eliminar eventos<\/h1>\n <button id=\"evento-remover\">Removiendo eventos con manejadores m\u00faltiples<\/button>\n\n <script>\n const $eventoRemover = document.getElementById(\"evento-remover\");\n\n const removerDobleClic = (e) => {\n alert(`Removiendo el evento de tipo ${e}`);\n console.log(e);\n $eventoRemover.removeEventListener(\"dblclick\", removerDobleClic)\n \/\/ Desabilitamos el bot\u00f3n con la propiedad disabled\n $eventoRemover.disabled = true;\n }\n\n $eventoRemover.addEventListener(\"dblclick\", removerDobleClic);\n <\/script>\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"