{"id":23338,"date":"2024-04-11T11:53:09","date_gmt":"2024-04-11T10:53:09","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/comunicacion-de-custom-events-en-webcomponents\/"},"modified":"2024-06-03T17:32:54","modified_gmt":"2024-06-03T16:32:54","slug":"comunicacion-de-custom-events-en-webcomponents","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/","title":{"rendered":"Communicating Custom Events in WebComponents"},"content":{"rendered":"<p>WebComponents have become a fundamental tool in web development. They allow part of the code to be encapsulated in reusable components, which makes it easier to maintain and scale an application. Among the most interesting functionalities that WebComponents offer us is communication through Custom Events.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#%C2%BFQue_son_los_Custom_Events_en_componentes\" >What are Custom Events in components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#%C2%BFComo_implementar_Custom_Events_en_WebComponents\" >How to implement Custom Events in WebComponents?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#Javascript_en_espanol_y_el_uso_de_Custom_Events_en_WebComponents\" >Javascript in Spanish and the use of Custom Events in WebComponents<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#%C2%BFEs_necesario_utilizar_WebComponents_para_implementar_Custom_Events\" >Do I need to use WebComponents to implement Custom Events?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#%C2%BFPuedo_utilizar_Custom_Events_para_comunicar_informacion_entre_diferentes_paginas_web\" >Can I use Custom Events to communicate information between different web pages?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/communication-of-custom-events-in-webcomponents\/#%C2%BFCual_es_la_ventaja_de_utilizar_Custom_Events_en_lugar_de_eventos_predefinidos_del_DOM\" >What is the advantage of using Custom Events instead of predefined DOM events?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Custom_Events_en_componentes\"><\/span>What are Custom Events in components?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Custom Events are events created by the developer to communicate information between components of a web page. Unlike predefined DOM events, such as &quot;click&quot; or &quot;submit&quot;, Custom Events allow us to define specific events for our application.<\/p>\n<p>Custom Events can be triggered by any element on the page and captured by other elements interested in that information. This makes it easier to communicate between independent components, even if they have no direct relationship in the element tree.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_implementar_Custom_Events_en_WebComponents\"><\/span>How to implement Custom Events in WebComponents?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Implementing Custom Events in WebComponents is simple and is done using the DOM Events API. To create a custom event, we use the class <code>CustomEvent<\/code> and its builder.<\/p>\n<pre><code>const myEvent = new CustomEvent(&#039;my-event&#039;, { detail: { message: &#039;Hello from my custom component!&#039; } }); this.dispatchEvent(myEvent);\n<\/code><\/pre>\n<p>In the example above, we created an event called &#039;my-event&#039; and we add an object <code>details<\/code> with the information we want to transmit. Next, we use the method <code>dispatchEvent<\/code> to send the event to all those interested in listening to it.<\/p>\n<p>To capture the event in another component, we must use the method <code>addEventListener<\/code> along with the name of the event we want to capture.<\/p>\n<pre><code>document.querySelector(&#039;#mi-component&#039;).addEventListener(&#039;my-event&#039;, (e) =&gt; { console.log(e.detail.message); });\n<\/code><\/pre>\n<p>In this case, we use the selector <code>#mi-component<\/code> to get the reference to the element we want to listen to. When the event &#039;my-event&#039; is triggered, the callback function will be executed passing the event with the transmitted information as an argument.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Javascript_en_espanol_y_el_uso_de_Custom_Events_en_WebComponents\"><\/span>Javascript in Spanish and the use of Custom Events in WebComponents<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you are a Spanish speaker and want to learn more about Javascript in Spanish, we recommend visiting our website <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. There you will find a wide variety of resources, tutorials, and code examples to improve your programming skills.<\/p>\n<p>Additionally, if you need help or have any questions, we invite you to visit our contact page <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a>. We will be happy to help you with whatever you need.<\/p>\n<p>And if you are looking for inspiration, don&#039;t miss our portfolio of projects at <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">nelkodev.com\/portfolio<\/a>. You can find real examples of websites and applications developed by our team.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Custom Events are a powerful tool for communication between components in a web application. Thanks to them, we can create a modular and scalable architecture, where independent components can interact without being directly coupled.<\/p>\n<p>The implementation of Custom Events in WebComponents is simple and allows us to improve communication between the elements of our page. Feel free to experiment and try this functionality in your own projects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_necesario_utilizar_WebComponents_para_implementar_Custom_Events\"><\/span>Do I need to use WebComponents to implement Custom Events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, Custom Events can be used in any type of web development, they are not limited exclusively to WebComponents. However, WebComponents provide an ideal environment for implementing these custom events due to their focus on component reuse.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_utilizar_Custom_Events_para_comunicar_informacion_entre_diferentes_paginas_web\"><\/span>Can I use Custom Events to communicate information between different web pages?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, Custom Events are limited to the scope of a single web page. If you need to communicate information between different pages, there are other techniques such as using local storage or communicating through an API.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_la_ventaja_de_utilizar_Custom_Events_en_lugar_de_eventos_predefinidos_del_DOM\"><\/span>What is the advantage of using Custom Events instead of predefined DOM events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Custom Events allow us to define specific events for our application, which facilitates communication between independent components. Additionally, by using Custom Events we can transmit additional information through the object <code>details<\/code>, which gives us greater flexibility when transmitting data.<\/p>","protected":false},"excerpt":{"rendered":"<p>WebComponents have become a fundamental tool in web development. They allow you to encapsulate part of the code in reusable components, which facilitates the maintenance and scalability of an application. Among the most interesting functionalities offered by WebComponents is communication through Custom Events. What are Custom Events in WebComponents?<\/p>","protected":false},"author":1,"featured_media":23339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1127],"tags":[205,1071,717,1072,742],"class_list":["post-23338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-webcomponents","tag-blog","tag-comunicacion","tag-custom","tag-events","tag-webcomponents"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23338"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23339"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}