Comment créer des événements personnalisés dans JavaScript

Points de base

• La gestion des événements JavaScript est la base de toutes les applications client, mais elles sont associées aux éléments DOM et peuvent ne pas être suffisamment flexibles. Les événements personnalisés JavaScript résolvent ce problème, offrant une plus grande flexibilité et facilité de maintenance.
• La création d'événements personnalisés JavaScript comprend des noms d'événements, des détails et des options à un nouvel objet CustomEvent. Après la création, vous pouvez utiliser la méthode dispatchEvent pour expédier cet événement sur un élément spécifique.
• Plusieurs gestionnaires peuvent souscrire à des événements personnalisés, afin que différentes actions puissent être effectuées en fonction de l'événement. Chrome, Firefox et Opera prennent en charge les événements personnalisés, et certaines bibliothèques JavaScript fournissent également un support.

La gestion des événements JavaScript est la base de toutes les applications client. Lorsqu'un événement se produit sur un élément cible (tels que les clics du bouton, les mouvements de la souris, les soumissions de formulaires, etc.), la fonction de gestionnaire est exécutée. Un objet d'événement est transmis au gestionnaire, qui fournit diverses propriétés et de nombreuses méthodes pour bloquer l'opération par défaut. Un inconvénient est que les événements sont étroitement liés aux éléments DOM. Considérez une forme simple qui accepte les commentaires des utilisateurs:

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form>

Lors de la soumission du formulaire, nous pouvons écrire un gestionnaire pour faire écho au message à l'écran, par exemple:

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

Et si nous voulons également envoyer un message en tant que tweet, le stocker sur le serveur ou effectuer d'autres actions? Pour la méthode de délégation des événements existants, nous avons deux options:

1. Ajoutez plus de code dans les gestionnaires existants. Ce n'est pas suffisamment flexible car chaque fois qu'une fonctionnalité est ajoutée, modifiée ou supprimée, la fonction de gestionnaire doit être mise à jour et testée. Les messages publiés peuvent avoir des dizaines d'utilisations, et nous essayons de les appliquer tous au même bloc de code.

2. Créez plus de gestionnaires d'événements à chaque fin. Cela produira un code plus élégant, mais entraînera des problèmes de maintenance. Tout d'abord, chaque fonction doit effectuer des opérations similaires pour extraire et vérifier les messages. Et si nous devons changer le formulaire? Le simple renommage de l'ID nécessite de modifier le code de gestion des événements pour chaque abonné.

ne serait-ce pas bien si nous pouvions simplement déclencher un événement "NewMessage" personnalisé lors de la publication d'un message valide? Il serait encore mieux que nous puissions surveiller les balises document ou body au lieu de référencer des nœuds de formulaire spécifiques. Les événements personnalisés nous permettent de le faire. Le déclenchement d'un événement personnalisé est simple; CustomEvent

Dans cet exemple, "NewMessage" est le type d'événement personnalisé. Le deuxième paramètre est un objet avec trois attributs:

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

• detail: Un objet enfant qui fournit des informations personnalisées sur les événements. Dans cet exemple, nous avons ajouté un message et un temps.
• bubbles: Si true, l'événement bouillonnera à l'ancêtre de l'élément qui a déclenché l'événement.
• cancelable: Si c'est true, vous pouvez utiliser la méthode stopPropagation() de l'objet de l'événement pour annuler l'événement.

Maintenant, nous devons expédier cet événement sur un élément spécifique, par exemple:

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form>

Un certain nombre de gestionnaires peuvent s'abonner à cet événement en utilisant le code suivant:

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

Page de démonstration

Cet exemple montre la page technique: voir la page de démonstration d'événements personnalisés. Le gestionnaire d'événements standard recherche les soumissions du formulaire HTML ci-dessus. Cette fonction obtient le message actuel et en supposant qu'il est valide, un nouvel événement "NewMessage" est envoyé.

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

Le gestionnaire peut désormais souscrire à l'événement "NewMessage". L'événement n'est déclenché que si un message valide existe, et puisque bubbles est défini sur true, l'événement peut être appliqué à la forme ou à l'un de ses ancêtres, comme la racine document, par exemple:

document.getElementById("msgbox").dispatchEvent(event);

Le

le message lui-même peut être extrait de l'attribut detail.message de l'objet de l'événement.

Compatibilité du navigateur

au moment de la rédaction, des objets de support Chrome, Firefox et d'opéra CustomEvent. Il est disponible dans la version nocturne de Safari, il sera donc probablement disponible dans ce navigateur bientôt. Cet objet n'est pas pris en charge dans IE9 et ci-dessous. Heureusement, plusieurs bibliothèques JavaScript prennent en charge les délégués d'événements personnalisés, alors restez à l'écoute pour SitePoint pour obtenir bientôt une solution de navigateur.

(La partie FAQ est omise ici car elle ne correspond pas à l'objectif pseudo-original et est trop long.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!