{"id":230787,"date":"2022-12-08T17:29:00","date_gmt":"2022-12-08T14:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230787"},"modified":"2022-12-07T11:54:31","modified_gmt":"2022-12-07T08:54:31","slug":"le-pourquoi-et-le-comment-des-evenements-jquery-personnalises","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/le-pourquoi-et-le-comment-des-evenements-jquery-personnalises\/","title":{"rendered":"Le pourquoi et le comment des \u00e9v\u00e9nements jQuery personnalis\u00e9s"},"content":{"rendered":"\n

D\u00e8s la version 1.0, jQuery a fourni une fonction de d\u00e9clenchement<\/a> qui nous permet de\u00a0:<\/p>\n

\n

Ex\u00e9cute tous les gestionnaires et comportements attach\u00e9s aux \u00e9l\u00e9ments correspondants pour le type d’\u00e9v\u00e9nement donn\u00e9.<\/p>\n<\/blockquote>\n

Mais ce n’est qu’\u00e0 partir de la version 1.3 que cette fonction particuli\u00e8re est devenue beaucoup plus utile, du moins en ce qui me concerne. Je dis cela parce que c’est \u00e0 ce moment-l\u00e0 que nous avons acquis la possibilit\u00e9 de d\u00e9finir des \u00e9v\u00e9nements personnalis\u00e9s, puis de d\u00e9finir des gestionnaires pour eux.<\/p>\n

Quel est, cependant, un cas d’utilisation probable dans lequel les \u00e9v\u00e9nements jQuery personnalis\u00e9s sont utiles dans le contexte de WordPress\u00a0? Du haut de votre t\u00eate, vous pourrez peut-\u00eatre en trouver beaucoup. Ou peut \u00eatre pas.<\/p>\n

Ce n’est que r\u00e9cemment que je les utilise beaucoup plus que d’habitude. J’ai donc pens\u00e9 que je partagerais comment je les utilise si pour l’instant autre chose que de vous montrer comment les connecter \u00e0 votre travail.<\/p>\n

\u00c9v\u00e9nements jQuery personnalis\u00e9s<\/h2>\n

Si vous avez de l’exp\u00e9rience avec JavaScript – vanille ou non – vous connaissez probablement les gestionnaires d’\u00e9v\u00e9nements de base. Autrement dit, lorsque quelqu’un clique sur un \u00e9l\u00e9ment, nous avons une fonction d\u00e9finie pour se d\u00e9clencher qui fait quelque chose.<\/p>\n

Les \u00e9v\u00e9nements jQuery personnalis\u00e9s ressemblent beaucoup \u00e0 cela, sauf que ce sont des \u00e9v\u00e9nements que nous d\u00e9finissons. Cela signifie que nous n’avons pas \u00e0 compter sur le moment o\u00f9 quelqu’un d\u00e9place sa souris sur un \u00e9l\u00e9ment ou lorsqu’il clique sur un \u00e9l\u00e9ment.<\/p>\n

Au lieu de cela, nous pouvons d\u00e9clencher un \u00e9v\u00e9nement, puis configurer un gestionnaire pour r\u00e9pondre de mani\u00e8re appropri\u00e9e. Voici un exemple.<\/p>\n

Pr\u00e9paration d’un \u00e9v\u00e9nement personnalis\u00e9<\/h3>\n

Disons que vous travaillez sur un projet et qu’il a une page d’administration charg\u00e9e de r\u00e9cup\u00e9rer les donn\u00e9es d’une API tierce. Le flux de contr\u00f4le ressemblerait \u00e0 ceci\u00a0:<\/p>\n

    \n
  1. L’utilisateur clique sur un bouton,<\/li>\n
  2. Une requ\u00eate Ajax est initi\u00e9e et demande des informations au tiers,<\/li>\n
  3. Pendant que la demande est en cours, les boutons \u00e0 l’\u00e9cran doivent \u00eatre d\u00e9sactiv\u00e9s,<\/li>\n
  4. Une fois la requ\u00eate termin\u00e9e, les boutons peuvent \u00eatre r\u00e9activ\u00e9s,<\/li>\n
  5. En option, un message d’\u00e9tat peut \u00eatre \u00e9crit \u00e0 l’\u00e9cran.<\/li>\n<\/ol>\n

    Pour que cela se produise, il s’attend \u00e0 ce qu’il y ait au moins un bouton (comme dans un \u00e9l\u00e9ment d’ entr\u00e9e) et un champ de texte facultatif ou une zone de<\/strong> texte<\/strong> dans laquelle le statut de la demande peut se produire.<\/p>\n

    Une fois que l’utilisateur clique sur l’\u00e9v\u00e9nement, nous pouvons d\u00e9clencher un \u00e9v\u00e9nement personnalis\u00e9. Nous pouvons appeler cet \u00e9v\u00e9nement acme.ajax.processing<\/strong>. Ensuite, nous pouvons utiliser la fonction done<\/a> fournie par jQuery pour g\u00e9rer tout ce que nous voulons nettoyer par la suite ou nous pouvons utiliser notre fonction personnalis\u00e9e s’il y a aussi quelque chose que nous voulons g\u00e9rer \u00e0 la fin.<\/p>\n

    Pour ces deux, nous allons regarder les deux. Nous aurons donc \u00e9galement un \u00e9v\u00e9nement appel\u00e9 acme.ajax.complete<\/strong>.<\/p>\n

    Nous sommes donc concern\u00e9s par :<\/p>\n