{"id":230536,"date":"2022-12-08T17:07:00","date_gmt":"2022-12-08T14:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230536"},"modified":"2022-12-07T11:54:28","modified_gmt":"2022-12-07T08:54:28","slug":"el-por-que-y-el-como-de-los-eventos-jquery-personalizados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/el-por-que-y-el-como-de-los-eventos-jquery-personalizados\/","title":{"rendered":"El por qu\u00e9 y el c\u00f3mo de los eventos jQuery personalizados"},"content":{"rendered":"\n<p>Ya en 1.0, jQuery ha proporcionado una funci\u00f3n de <a href=\"https:\/\/api.jquery.com\/trigger\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">activaci\u00f3n<\/a> que nos permite:<\/p>\n<blockquote>\n<p>Ejecuta todos los controladores y comportamientos adjuntos a los elementos coincidentes para el tipo de evento dado.<\/p>\n<\/blockquote>\n<p>Pero no fue hasta la versi\u00f3n 1.3 que esta funci\u00f3n en particular se volvi\u00f3 significativamente m\u00e1s \u00fatil, al menos en lo que a m\u00ed respecta. Digo eso porque fue entonces cuando obtuvimos la capacidad de definir eventos personalizados y luego establecer controladores para ellos.<\/p>\n<p>Sin embargo, \u00bfcu\u00e1l es un caso de uso probable en el que los eventos personalizados de jQuery son \u00fatiles en el contexto de WordPress? En la parte superior de tu cabeza, es posible que puedas pensar en muchos. O tal vez no.<\/p>\n<p>No ha sido hasta \u00faltimamente que los he estado usando significativamente m\u00e1s de lo habitual. As\u00ed que pens\u00e9 en compartir c\u00f3mo los estoy usando si ahora fuera por otra raz\u00f3n que mostrarte c\u00f3mo conectarlos a tu trabajo.<\/p>\n<h2>Eventos jQuery personalizados<\/h2>\n<p>Si tiene experiencia con JavaScript (vainilla o no), es probable que est\u00e9 familiarizado con los controladores de eventos b\u00e1sicos. Es decir, cuando alguien hace clic en un elemento, tenemos una funci\u00f3n configurada para activarse que hace algo.<\/p>\n<p>Los eventos jQuery personalizados se parecen mucho a eso, excepto que estos son eventos que definimos. Esto significa que no tenemos que depender de cuando alguien mueve el mouse sobre un elemento o cuando hace clic en un elemento.<\/p>\n<p>En su lugar, podemos desencadenar un evento y luego configurar un controlador para que responda adecuadamente. Aqu\u00ed hay un ejemplo.<\/p>\n<h3>Preparaci\u00f3n para un evento personalizado<\/h3>\n<p>Supongamos que est\u00e1 trabajando en un proyecto y tiene una p\u00e1gina de administraci\u00f3n responsable de recuperar datos de una API de terceros. El flujo de control se ver\u00eda as\u00ed:<\/p>\n<ol>\n<li>El usuario hace clic en un bot\u00f3n,<\/li>\n<li>Se inicia una solicitud Ajax y solicita informaci\u00f3n del tercero,<\/li>\n<li>Mientras se realiza la solicitud, los botones en la pantalla deben estar deshabilitados,<\/li>\n<li>Una vez completada la solicitud, los botones se pueden volver a habilitar,<\/li>\n<li>Opcionalmente, se puede escribir un mensaje de estado en la pantalla.<\/li>\n<\/ol>\n<p>Para que esto suceda, se espera que haya al menos un bot\u00f3n (como en un elemento de <strong>entrada) y un campo de texto o<\/strong> <strong>\u00e1rea<\/strong> de texto opcional en el que puede ocurrir el estado de la solicitud.<\/p>\n<p>Una vez que el usuario hace clic en el evento, podemos activar un evento personalizado. Podemos llamar a este evento <strong>acme.ajax.processing<\/strong>. Luego, podemos usar la funci\u00f3n <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">done<\/a> proporcionada por jQuery para manejar cualquier cosa que queramos limpiar despu\u00e9s o podemos usar nuestra funci\u00f3n personalizada si hay algo que tambi\u00e9n queremos manejar al final.<\/p>\n<p>Para estos dos, veremos ambos. As\u00ed que tambi\u00e9n tendremos un evento llamado <strong>acme.ajax.complete<\/strong>.<\/p>\n<p>As\u00ed que nos preocupamos por:<\/p>\n<ul>\n<li>crear un evento personalizado,<\/li>\n<li>activ\u00e1ndolo,<\/li>\n<li>configurar un controlador de eventos para ello,<\/li>\n<li>terminando una vez que se completa la solicitud.<\/li>\n<\/ul>\n<p>Y eso es lo que haremos.<\/p>\n<h3>Definici\u00f3n de un evento personalizado<\/h3>\n<p>Entonces, cuando un usuario hace clic en un bot\u00f3n, se est\u00e1 realizando una solicitud de Ajax. Al mismo tiempo, esto tambi\u00e9n activar\u00e1 el evento <strong>acme.ajax.processing<\/strong> que tendr\u00e1 su controlador de eventos.<\/p>\n<p>Entonces, primero, creemos la solicitud Ajax. <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-00-button-handler-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Para esto<\/a><\/strong>, supondr\u00e9 que el bot\u00f3n responsable de activar la solicitud de Ajax simplemente se denomina <strong>$button:<\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  });\n});<\/code><\/pre>\n<p>Tenga en cuenta que lo primero que queremos hacer es activar el evento de procesamiento y luego hacemos la solicitud.<\/p>\n<h3>Manejo de un evento personalizado<\/h3>\n<p>A continuaci\u00f3n, queremos asegurarnos de que tenemos un controlador de eventos configurado para deshabilitar el bot\u00f3n mientras se realiza la solicitud.<\/p>\n<p>Esto es f\u00e1cil de hacer y mantenerlo simple, y voy a <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-01-disable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">deshabilitar el bot\u00f3n:<\/a><\/strong><\/p>\n<pre><code>$(document).on('acme.ajax.processing', function() {\n  $button.attr('disabled', 'disabled');\n});<\/code><\/pre>\n<p>F\u00e1cil, \u00bfverdad?<\/p>\n<h3>Manejo de otro evento personalizado<\/h3>\n<p>A continuaci\u00f3n, debemos manejar la situaci\u00f3n cuando se complete la solicitud de Ajax. Entonces, debemos asegurarnos de activar el evento y luego debemos manejar el evento.<\/p>\n<p>Activar el evento <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-02-request-complete-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">es f\u00e1cil:<\/a><\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  })\n  .done(function() {\n     $(document).trigger('acme.ajax.complete');\n  });\n});<\/code><\/pre>\n<p>Y el manejo del evento se puede cambiar al c\u00f3digo <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-03-enable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">que ya tenemos:<\/a><\/strong><\/p>\n<pre><code>$(document)\n  .on('acme.ajax.processing', function() {\n    $button.attr('disabled', 'disabled');\n  })\n  .on('acme.ajax.complete', function() {\n    $button.removeAttr('disabled');\n  });<\/code><\/pre>\n<p>Se puede encadenar porque sucede en el objeto del <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documento<\/a>, no en un elemento separado.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" alt=\"El por qu\u00e9 y el c\u00f3mo de los eventos jQuery personalizados\" ><\/a><\/p>\n<p>Con ese fin, por lo que es mucho m\u00e1s f\u00e1cil de manejar.<\/p>\n<h2>solo un ejemplo<\/h2>\n<p>Por supuesto, este es solo un ejemplo de c\u00f3mo manejar eventos jQuery personalizados.<\/p>\n<p>Hay muchas otras formas de hacer esto, y puedes hacer algunas cosas bastante complicadas con \u00e9l; sin embargo, esto deber\u00eda proporcionar suficiente informaci\u00f3n para lo que necesita sobre c\u00f3mo trabajar con eventos personalizados en un nivel fundamental.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sin embargo, \u00bfcu\u00e1l es un caso de uso probable en el que los eventos personalizados de jQuery son \u00fatiles en el contexto de WordPress? \u00bfY c\u00f3mo podr\u00edamos usarlos en nuestro trabajo diario?<\/p>\n","protected":false},"author":1,"featured_media":236464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,831,727],"tags":[1172],"class_list":["post-230536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-guia-para-principiantes","category-javascript-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=230536"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230536\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/236464"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}