Puisque nous venons de parler d'événements, le moment est venu de mentionner les événements personnalisés. Tous les événements dont nous avons parlé jusqu'à présent sont des événements «réels» pour ainsi dire. Les événements qui proviennent du DOM en fonction de choses réelles qui se produisent, comme un clic ou une pression sur une touche. Ces événements peuvent être «déclenchés» artificiellement dans jQuery. Par exemple, pour «simuler» un clic sur un bouton, vous pouvez faire:
$("#some-button").trigger("click");Ensuite, tous les gestionnaires de clics liés à ce bouton se déclencheront comme si un utilisateur avait réellement cliqué sur ce bouton. Mais que se passerait-il si nous faisions:
$("#some-button").trigger("dance");Que se passe-t-il alors? «Danse» n'est pas un événement «réel». Mais aucune erreur ne sera générée. Il se trouve qu'il n'y a probablement aucun gestionnaire de «danse» lié à ce bouton. Mais il pourrait y en avoir et c'est essentiellement ce qu'est un événement personnalisé. Un événement avec un nom que vous venez d'inventer.
Pourquoi ferais-tu ça? Principalement des raisons organisationnelles. Vous aimeriez peut-être séparer votre JavaScript qui gère les événements et les actions, et votre JavaScript qui gère les données et les tâches administratives. C'est très raisonnable. Si ce bouton était peut-être un bouton «Enregistrer les paramètres», vous pourriez simplement déclencher un événement personnalisé nommé «save-settings» et ailleurs avoir un gestionnaire qui attend que cet événement se déclenche et effectue la sauvegarde réelle des données. C'est essentiellement ce que nous avons fait dans l'exemple de la vidéo.
Un autre cas d'utilisation des événements personnalisés est la création de composants d'interface utilisateur génériques. J'en parle dans ce billet de blog.
Vous créez peut-être un effet d'accordéon en tant que composant d'interface utilisateur. L'accordéon fait ce que tous les accordéons font, ouvre et ferme les panneaux sur des clics / taps. Votre composant d'interface utilisateur le fait très bien. Maintenant, un développeur qui utilise cet accordéon peut avoir des choses spéciales et uniques qu'il souhaite faire avec. Supposons qu'ils utilisent l'accordéon pour les paramètres de compte et que lorsqu'un utilisateur ferme un panneau, il souhaite enregistrer les données des éléments de formulaire de ce panneau. Un modèle traditionnel pourrait être pour l'auteur de ce composant d'interface utilisateur d'accordéon d'offrir des fonctions de rappel lorsque cette action se produit. Lorsque vous initialisez l'accordéon, vous transmettez les fonctions de rappel que vous souhaitez appeler lorsque ces choses se produisent. C'est une voie à suivre. Une autre voie serait pour l'accordéon de déclencher automatiquement des événements personnalisés pour toutes les actions pertinentes qu'il effectue.Lorsque ce panneau se ferme, il peut déclencher unpanelClosedévénement sur l'élément d'accordéon lui-même. Ensuite, les développeurs travaillant avec cela pourraient simplement se lier à ces événements. C'est juste une autre voie que vous pouvez emprunter pour des raisons d'organisation qui peuvent être assez élégantes.