Interception d’EventListener Javascript

Créer une Classe Javascript pour intercepter les évènements Javascript

J’ai récemment créé une classe en JavaScript pour répondre à un besoin que je rencontre souvent lorsque je travaille avec des plugins WordPress et des librairies tierces. L’idée derrière cette classe est assez simple : intercepter les événements sur des éléments HTML, ajouter une logique personnalisée, puis réémettre l’événement d’origine, le tout sans avoir à plonger dans le code parfois complexe de ces plugins ou librairies.

Intérêt de la Classe Javascript EventInterceptor

Dans mon travail, je suis souvent confronté à des situations où je dois modifier le comportement d’un événement spécifique, comme un clic, une pression de touche, ou un survol de souris. Cela peut se produire avec des plugins que je n’ai pas développés moi-même, ou dans des librairies où l’accès au code source est possible mais pas idéal pour des modifications rapides. Insérer du code à l’intérieur de ces systèmes n’est pas recommandé car une simple mise à jour de plugin peut effacer le nouveau code. D’où l’idée de créer un outil flexible pour gérer ces interactions sans avoir à toucher au cœur des scripts existants.

La logique

La construction de EventInterceptor repose sur une idée simple mais puissante : intercepter et contrôler le flux des événements. Lors de la création d’une instance de cette classe, trois éléments principaux sont requis :

• 1. L’élément HTML cible : C’est l’élément sur lequel l’événement se produit. Il peut s’agir d’un bouton, d’un lien, d’un champ de saisie, etc.
• 2. La fonction personnalisée : Cette fonction est exécutée lorsque l’événement est intercepté. Elle peut contenir n’importe quelle logique que vous souhaitez ajouter, comme un enregistrement de log ou le déclenchement d’une autre action.
• 3. L’événement à intercepter : Il peut s’agir de n’importe quel événement standard du DOM, comme un clic (click), une pression de touche (keydown), un survol de souris (mouseover), etc.

Une fois l’événement intercepté, EventInterceptor arrête la propagation normale de l’événement, exécute la fonction personnalisée, puis réémet l’événement d’origine. Cela permet aux autres scripts ou gestionnaires d’événements de réagir à l’événement comme s’il n’avait jamais été intercepté.

Comment utiliser EventInterceptor ?

L’utilisation de cette classe est conçue pour être simple et directe. Voici un exemple de son utilisation :

const interceptor = new EventInterceptor(
    document.getElementById('clickBtn'), // L'élément HTML cible
    (message) => { console.log(`Intercepté : ${message}`); }, // La fonction personnalisée
    'click', // L'événement à intercepter
    'Click sur le bouton' // Arguments personnalisés pour la fonction
);

Dans cet exemple, chaque fois que le bouton avec l’ID clickBtn est cliqué, l’événement click est intercepté. Avant que l’événement ne se propage, un message est logué dans la console, puis l’événement est réémis pour que d’autres scripts puissent le gérer.

Voici un exemple d’utilisation simple que vous pouvez voir en action ici : Voir l’exemple sur CodePen.

See the Pen Enhanced button events interceptor by Jensen SIU (@seanGooGoo) on CodePen.

Je vous encourage à explorer et à utiliser cette classe dans vos propres projets. Vous pouvez la tester et la voir en action sur ce CodePen. Cette classe est libre d’usage, et j’espère qu’elle pourra vous être aussi utile qu’elle l’est pour moi. N’hésitez pas à l’adapter à vos besoins ou même à la faire évoluer !