Comment créer des événements personnalisés en javascript pour programme avec html

Les événements standard fournis avec javascript fonctionnent bien pour les tâches les plus courantes. Mais, parfois, vous aurez besoin d'un événement personnalisé. Par exemple, vous devez disposer d'un procédé de réalisation d'un clic, et javascript fournit un événement standard pour gérer ce besoin. Cependant, il ya des moments où vous avez besoin pour passer des informations que les fabricants de javascript ne peuvent pas prévoir. Dans ce cas, vous devez créer un événement personnalisé.

Comment travailler avec l'objet de CustomEvent en javascript

La CustomEvent objet fournit les moyens pour créer un nouvel événement - celui qui ne fait pas partie de javascript par défaut. La CustomEvent objet est d'une simplicité trompeuse. Tout ce qu'il contient sont les deux propriétés décrites dans la liste suivante:

• Nom de l'événement: Une chaîne contenant le nom que vous souhaitez utiliser pour l'événement. Le nom peut être quelque chose que vous voulez, mais il ne peut pas contenir de caractères blancs, tels que l'espace. Utilisez un trait de soulignement (_), Le cas échéant, pour séparer les mots.

• Les données de l'événement: Un littéral d'objet qui contient les données que vous voulez passer dans le cadre de l'événement. Cette partie d'un événement personnalisé peut devenir assez complexe parce que vous pouvez passer toute quantité de données sous quelque forme que vous voulez, tant que les données remplit le format littéral d'objet. Les données d'événement est disponible en deux formes:

• Données standard: Vous pouvez fournir des informations pour l'une des propriétés prises en charge par la norme Evénement objet. La plupart des développeurs définissent le bulles et cancelable propriétés comme un minimum.

• Données personnalisée: Un événement personnalisé peut contenir des données personnalisées dans toute forme. Vous devez éviter d'utiliser les noms des propriétés standard. Par exemple, vous ne pouvez pas donner une propriété personnalisée du nom bulles. Beaucoup de développeurs utilisent le détail la propriété de contenir des détails sur l'événement personnalisé, mais cela est une simple convention, et vous êtes libre d'utiliser toute forme vous semble.

Comment faire pour créer le code d'événement personnalisé en javascript

javascript rend très facile de créer des événements personnalisés de votre propre. Ces événements pourraient être quelque chose. Il ya beaucoup d'utilisations pour des événements personnalisés, mais ils suivent tous le même modèle. Cet exemple commence l'objet d'événement personnalisé mondiale montré ici.

// Définir un nouveau event.var SpecialEvent = new CustomEvent ("SpecialMessage", {détail: {message: "Bonjour à tous", le temps: new Date ()}, des bulles: true, cancelable: true}) -

Notez que cet événement repose sur une forme de littéral d'objet. Cependant, remarquez comment détail est en fait un objet imbriqué littérale. Vous pouvez information emboîter autant de niveaux que nécessaire. Si vous souhaitez changer une caractéristique de l'événement, vous pouvez le faire. Par exemple, pour modifier le message, vous pouvez utiliser un code similaire à ceci:

SpecialEvent.detail.message = "Un nouveau message!" -

Maintenant que vous avez un événement personnalisé à utiliser, vous devez passer par trois phases de mise en œuvre. D'abord, vous devez attribuer l'événement à un contrôle. L'exemple utilise une étiquette et indique à l'application d'effectuer la cession dans le cadre du processus de chargement de formulaire à l'aide: . Voici le code que vous devez affecter l'événement à l'étiquette:

AssignEvent fonction () {// Obtenir l'objet reference.var label = document.getElementById ("CustomLabel") - // assigne un événement à l'object.Label.addEventListener ("SpecialMessage", handleEvent, false) -}

Ici vous voyez un événement click standard pour le SpecialMessage événement personnalisé. Que vous affectez un événement standard ou sur mesure, la technique est la même.

La deuxième phase de la mise en œuvre d'un événement personnalisé est déclenchement de l'événement. Cet exemple repose sur un bouton pour effectuer la tâche, mais aucune action pourrait déclencher l'événement. Tout ce que vous avez besoin est une action où vous pouvez attacher code pour effectuer la tâche de déclenchement de l'événement. Voici le code événement de tir utilisé pour cet exemple:

FireEvent fonction () {// Obtenir l'objet reference.var label = document.getElementById ("CustomLabel") - // Feu le event.Label.dispatchEvent (SpecialEvent) -}

La dispatchEvent () fonction effectue le travail réel. Notez que vous tirez de l'événement en utilisant l'objet de l'événement que vous avez créé plus tôt. Si vous aviez voulu, vous pouvez attribuer des valeurs à tout le contenu trouvé dans l'événement personnalisé. Pour cette question, vous pourriez créer un nouveau contenu au besoin aussi longtemps que le destinataire sait comment travailler avec le nouveau contenu.

La troisième phase de la mise en œuvre d'un événement personnalisé fournit le gestionnaire d'événement. Le gestionnaire d'événement reçoit l'événement personnalisé du contrôle qui est attribué au gestionnaire d'événement. Voici le gestionnaire d'événement utilisé dans ce cas:

fonction handleEvent (event) {// Afficher l'événement information.document.getElementById ("CustomLabel") innerHTML =. "contrôle:" + event.currentTarget.id + "
Message: "+ event.detail.message +"
Temps envoyé: "+ event.detail.time.toTimeString () -}

Tout ce que ce gestionnaire d'événement ne fait afficher les informations d'événement personnalisé à l'écran.