{"id":28833,"date":"2024-04-13T14:26:48","date_gmt":"2024-04-13T13:26:48","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-los-eventos-personalizados-en-javascript\/"},"modified":"2024-06-03T17:42:47","modified_gmt":"2024-06-03T16:42:47","slug":"domina-los-eventos-personalizados-en-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-custom-events-in-javascript\/","title":{"rendered":"Master Custom Events in JavaScript"},"content":{"rendered":"<p>JavaScript programming has evolved significantly over time, offering greater capabilities for the development of complex and dynamic applications. One of the most powerful and perhaps least explored features by new developers is custom events. These allow more effective and orderly communication between the components of an application, facilitating state management and interaction between them. In this article, we will explore how you can create and use custom events in JavaScript to improve the architecture of your projects.<\/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\/master-custom-events-in-javascript\/#%C2%BFQue_Son_los_Eventos_Personalizados\" >What Are Custom Events?<\/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\/master-custom-events-in-javascript\/#Creacion_de_Eventos_Personalizados\" >Creating Custom Events<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-custom-events-in-javascript\/#Disparar_un_Evento\" >Trigger an Event<\/a><\/li><\/ul><\/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\/master-custom-events-in-javascript\/#Manejo_de_Eventos_Personalizados\" >Custom Event Management<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-custom-events-in-javascript\/#Uso_Practico_de_Eventos_Personalizados\" >Practical Use of Custom Events<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-custom-events-in-javascript\/#Comunicacion_entre_Componentes\" >Communication between Components<\/a><\/li><\/ul><\/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\/master-custom-events-in-javascript\/#Debugging_y_Mantenimiento\" >Debugging and Maintenance<\/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\/master-custom-events-in-javascript\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_Son_los_Eventos_Personalizados\"><\/span>What Are Custom Events?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Custom events are a tool that allows developers to generate their own events that are not limited by the browser&#039;s predefined events, such as &#039;click&#039;, &#039;mouseover&#039;, etc. This is tremendously useful in complex applications where various components need to communicate with each other in specific ways that standard events cannot satisfy.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creacion_de_Eventos_Personalizados\"><\/span>Creating Custom Events<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To create a custom event in JavaScript, we use the class <code>CustomEvent<\/code>, which is an extension of the class <code>Event<\/code>. Here I show you how you can create one:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const myEvent = new CustomEvent(&#039;myCustomEvent&#039;, { detail: { message: &#039;Hello, this is my custom event!&#039; } });<\/code><\/pre>\n<p>In the code above, <code>myCustomEvent<\/code> is the name of the event, and the object <code>details<\/code> contains data that can be sent to any event handler.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Disparar_un_Evento\"><\/span>Trigger an Event<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To fire the event we created, we need to select a DOM element to assign this event to, and then use the method <code>dispatchEvent<\/code>:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.dispatchEvent(myEvent);<\/code><\/pre>\n<p>So, we have fired the event <code>myCustomEvent<\/code> at the document level.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Manejo_de_Eventos_Personalizados\"><\/span>Custom Event Management<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once the custom event has been fired, other components or elements can listen and react to these events using <code>addEventListener<\/code> as follows:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&#039;myCustomEvent&#039;, function(e) { console.log(e.detail.message); \/\/ Output: Hello, this is my custom event! });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Uso_Practico_de_Eventos_Personalizados\"><\/span>Practical Use of Custom Events<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Imagine that you are building a web application where different sections must communicate with each other efficiently. For example, a shopping cart widget must be updated every time a user adds a new product. This is where custom events shine, allowing different components to &quot;listen&quot; to each other without resorting to more complex or less efficient solutions.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Comunicacion_entre_Componentes\"><\/span>Communication between Components<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ In the component that adds products const addProductToCart = product =&gt; { const UpdateCartEvent = new CustomEvent(&#039;updateCart&#039;, { detail: { product } }); document.dispatchEvent(CartUpdateEvent); }; \/\/ In the cart component document.addEventListener(&#039;updateCart&#039;, function(e) { updateCartInterface(e.detail.product); });<\/code><\/pre>\n<p>This event system makes your code more modular and maintainable by decoupling the logic of components that interact with each other. Plus, it&#039;s easy to understand and follow, even for those who might be less familiar with your project structure.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Debugging_y_Mantenimiento\"><\/span>Debugging and Maintenance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the advantages of using custom events is that they greatly simplify the debugging and maintenance process. If a component is not responding appropriately, you can easily review the events it is handling, narrowing down the number of possible sources of the problem.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Custom events in JavaScript are an extremely powerful tool for developers. They allow a clean and well-organized architecture, facilitating communication between components without coupling them. This not only improves the quality of the code but also makes it more scalable and maintainable.<\/p>\n<p>If you are interested in going deeper into this topic or if you have specific questions, feel free to <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact me<\/a>. The proper use of these events can make a difference in the efficiency and professionalism of your projects.<\/p>\n<p>I hope this article has helped you understand and encourage you to use custom events in your next projects. Visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> for more resources and guides on modern web development. Until next time!<\/p>","protected":false},"excerpt":{"rendered":"<p>JavaScript programming has evolved significantly over time, offering greater capabilities for developing complex and dynamic applications. One of the most powerful features, and perhaps least explored by new developers, is custom events. These allow for more effective and orderly communication between components of an application, allowing for more efficient and orderly communication between components of an application.<\/p>","protected":false},"author":1,"featured_media":28834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[205,1473,551,2205,185,221,1084,1008],"class_list":["post-28833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-blog","tag-domina","tag-eventos","tag-frontend","tag-javascript","tag-los","tag-personalizados","tag-pruebas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28833","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=28833"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28834"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}