{"id":230923,"date":"2022-12-08T17:13:00","date_gmt":"2022-12-08T14:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230923"},"modified":"2022-12-07T11:54:36","modified_gmt":"2022-12-07T08:54:36","slug":"o-porque-e-como-dos-eventos-personalizados-do-jquery","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/o-porque-e-como-dos-eventos-personalizados-do-jquery\/","title":{"rendered":"O porqu\u00ea e como dos eventos personalizados do jQuery"},"content":{"rendered":"\n

J\u00e1 na vers\u00e3o 1.0, o jQuery forneceu uma fun\u00e7\u00e3o de gatilho<\/a> que nos permite:<\/p>\n

\n

Execute todos os manipuladores e comportamentos anexados aos elementos correspondentes para o tipo de evento fornecido.<\/p>\n<\/blockquote>\n

Mas n\u00e3o foi at\u00e9 1.3 que essa fun\u00e7\u00e3o espec\u00edfica se tornou significativamente mais \u00fatil, pelo menos no que me diz respeito. Digo isso porque foi quando ganhamos a capacidade de definir eventos personalizados e, em seguida, definir manipuladores para eles.<\/p>\n

No entanto, qual \u00e9 um caso de uso prov\u00e1vel em que os eventos personalizados do jQuery s\u00e3o \u00fateis no contexto do WordPress? De cabe\u00e7a, voc\u00ea pode criar muitos. Ou talvez n\u00e3o.<\/p>\n

N\u00e3o foi at\u00e9 recentemente que eu os tenho usado significativamente mais do que o habitual. Ent\u00e3o, pensei em compartilhar como estou usando-os se por agora outra raz\u00e3o al\u00e9m de mostrar como conect\u00e1-los ao seu trabalho.<\/p>\n

Eventos jQuery personalizados<\/h2>\n

Se voc\u00ea tem experi\u00eancia com JavaScript \u2013 vanilla ou n\u00e3o \u2013 provavelmente est\u00e1 familiarizado com manipuladores de eventos b\u00e1sicos. Ou seja, quando algu\u00e9m clica em um elemento, temos uma fun\u00e7\u00e3o definida para disparar que faz algo.<\/p>\n

Os eventos personalizados do jQuery s\u00e3o muito parecidos com isso, exceto que s\u00e3o eventos que definimos. Isso significa que n\u00e3o precisamos depender de quando algu\u00e9m move o mouse sobre um elemento ou quando clica em um elemento.<\/p>\n

Em vez disso, podemos acionar um evento e, em seguida, ter um manipulador configurado para responder adequadamente. Aqui est\u00e1 um exemplo.<\/p>\n

Preparando-se para um evento personalizado<\/h3>\n

Digamos que voc\u00ea esteja trabalhando em um projeto e ele tenha uma p\u00e1gina de administra\u00e7\u00e3o respons\u00e1vel por recuperar dados de uma API de terceiros. O fluxo de controle ficaria assim:<\/p>\n

    \n
  1. O usu\u00e1rio clica em um bot\u00e3o,<\/li>\n
  2. Uma solicita\u00e7\u00e3o Ajax \u00e9 iniciada e solicita informa\u00e7\u00f5es de terceiros,<\/li>\n
  3. Enquanto a requisi\u00e7\u00e3o est\u00e1 acontecendo, os bot\u00f5es na tela devem estar desabilitados,<\/li>\n
  4. Depois que a solicita\u00e7\u00e3o for conclu\u00edda, os bot\u00f5es podem ser reativados,<\/li>\n
  5. Opcionalmente, uma mensagem de status pode ser gravada na tela.<\/li>\n<\/ol>\n

    Para que isso aconte\u00e7a, espera-se que haja pelo menos um bot\u00e3o (como em um elemento de entrada) e um campo de texto ou \u00e1rea de<\/strong> texto<\/strong> opcional em que o status da solicita\u00e7\u00e3o possa acontecer.<\/p>\n

    Assim que o usu\u00e1rio clicar no evento, podemos acionar um evento personalizado. Podemos chamar esse evento de acme.ajax.processing<\/strong>. Em seguida, podemos usar a fun\u00e7\u00e3o done<\/a> fornecida pelo jQuery para lidar com qualquer coisa que queiramos limpar posteriormente ou podemos usar nossa fun\u00e7\u00e3o personalizada se houver algo que queremos manipular no final tamb\u00e9m.<\/p>\n

    Para este ambos, vamos olhar para ambos. Ent\u00e3o tamb\u00e9m teremos um evento chamado acme.ajax.complete<\/strong>.<\/p>\n

    Ent\u00e3o estamos preocupados com:<\/p>\n