jQuery Academy · Leçon

Création et déclenchement d’événements personnalisés

Leçon 3 sur 311 étapes

Création et déclenchement d’événements personnalisés est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Introduction aux événements personnalisés

Bienvenue ! Dans cette leçon, vous apprendrez à créer et à gérer vos propres événements personnalisés dans jQuery. C’est un moyen puissant de rendre votre code plus organisé et plus flexible.

Considérez les événements personnalisés comme des messages spéciaux que différentes parties de votre application web peuvent envoyer et recevoir. Cela les aide à communiquer sans être directement liées.

Pourquoi utiliser des événements personnalisés ?

Pourquoi utiliser des événements personnalisés ? Ils permettent de résoudre un problème courant : le couplage étroit. Lorsque les composants sont fortement couplés, la modification d’une partie de votre code peut en endommager une autre.

Découplage : les composants n’ont pas besoin de connaître le fonctionnement interne des autres.
Code plus propre : la logique liée à une action précise est centralisée.
Flexibilité : vous pouvez facilement ajouter ou supprimer des écouteurs sans modifier l’« émetteur ».

La méthode .trigger()

Pour « envoyer » ou « déclencher » un événement personnalisé, nous utilisons la méthode .trigger() de jQuery. Vous l’appelez sur un objet jQuery, un élément ou document, et vous transmettez le nom de l’événement sous forme de chaîne.

Le nom de l’événement peut être celui de votre choix, comme 'dataLoaded' ou 'itemAdded'.

Démonstration du déclenchement d’un événement

Voyons .trigger() en action. Nous allons déclencher un événement personnalisé appelé 'myCustomEvent' sur un bouton lorsqu’il est cliqué. Rien ne se produira encore, car personne ne l’écoute !

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

Écouter avec .on()

Pour « recevoir » ou « écouter » un événement personnalisé, nous utilisons la méthode familière .on(). Comme pour les événements intégrés, tels que 'click', vous indiquez le nom de l’événement et une fonction à exécuter lorsqu’il se produit.

Vous pouvez écouter sur le même élément que celui qui a déclenché l’événement, sur un élément parent, ou même sur le document lui-même pour les événements globaux.

Exemple de déclenchement et d’écoute

À présent, associons .trigger() et .on(). Cliquez sur le bouton et vous verrez apparaître le message, ce qui montre que notre événement personnalisé a été déclenché et écouté !

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Transmettre des données avec les événements

Les événements personnalisés sont encore plus utiles lorsque vous pouvez transmettre des données avec eux. Vous pouvez envoyer des arguments supplémentaires à .trigger() après le nom de l’événement. Ces arguments seront transmis à votre fonction de gestion d’événement.

Le premier argument du gestionnaire est toujours l’objet événement.
Les arguments suivants sont les données que vous avez transmises avec .trigger().

Démonstration des données d’un événement personnalisé

Ici, nous déclenchons un événement 'dataReady' et transmettons une chaîne ainsi qu’un objet. L’écouteur reçoit ces données et les affiche. C’est ainsi que les composants partagent des informations !

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Le découplage pour de meilleures applications

Utiliser des événements personnalisés pour communiquer aide à créer des applications plus modulaires et plus faciles à maintenir. Imaginez un composant « panier » et un composant « affichage des produits ».

Lorsqu’un produit est ajouté, l’« affichage des produits » déclenche 'productAdded'.
Le composant « panier » écoute 'productAdded' et se met à jour.

Aucun des deux composants n’a besoin de connaître les méthodes internes de l’autre, uniquement le contrat de l’événement.

Vérifiez votre compréhension

Lesquelles des affirmations suivantes décrivent correctement les avantages ou l’utilisation des événements personnalisés avec .trigger() et .on() ?

Réponds-y dans la leçon interactive

Récapitulatif : événements personnalisés

Excellent travail ! Vous avez appris à créer et à gérer des événements personnalisés dans jQuery. Voici un bref résumé :

Quoi : les événements personnalisés sont des messages définis par l’utilisateur pour les composants d’une application.
Pourquoi : ils favorisent le découplage, ce qui produit un code plus propre et plus flexible.
Comment : utilisez .trigger('eventName', [data]) pour déclencher un événement.
Comment : utilisez .on('eventName', function(event, data) { ... }) pour écouter un événement.

Maîtriser les événements personnalisés est une étape importante pour créer des applications jQuery robustes et évolutives !

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 22
Leçons: 48

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Création et déclenchement d’événements personnalisés » est-elle gratuite ?

Oui — le texte complet de « Création et déclenchement d’événements personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Création et déclenchement d’événements personnalisés » ?

Concevez et mettez en œuvre des événements personnalisés avec .trigger() et .on() afin de découpler les composants, d’obtenir un code plus clair et de permettre une communication flexible entre les d… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.

Combien de temps prend la leçon « Création et déclenchement d’événements personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Mise en œuvre d’une délégation d’événements robuste
Arrêt de la propagation des événements
Création et déclenchement d’événements personnalisés

← Retour à jQuery Academy