Nous pouvons personnaliser des événements pour obtenir un développement plus flexible. Les événements peuvent être un outil très puissant lorsqu'ils sont utilisés correctement. Le développement basé sur des événements présente de nombreux avantages (introduit plus tard).
Les fonctions avec des événements personnalisés sont des événements, de la garde et de DispatchEvent.
Personnalisez directement les événements, en utilisant le constructeur d'événements:
var event = nouvel événement ('build'); // Écoutez pour l'événement.elem.addeventListener ('build', fonction (e) {...}, false); // répartir l'événement.elem.dispatchEvent (événement);La garde peut créer un événement plus personnalisé et peut également être accompagné de certaines données. L'utilisation spécifique est la suivante:
var myEvent = new Customevent (EventName, Options);
Où les options peuvent être:
{Detail: {...}, Bubbles: true, annule: false}Le détail peut stocker certaines informations d'initialisation et peut être appelé lorsqu'il est déclenché. D'autres propriétés sont de définir si l'événement a bouillonnant et d'autres fonctions.
Les événements intégrés seront déclenchés par le navigateur en fonction de certaines opérations, et les événements personnalisés devront être déclenchés manuellement. La fonction DispatchEvent est utilisée pour déclencher un événement:
element.dispatchEvent (Customevent);
Le code ci-dessus indique que l'événement de garde est déclenché sur l'élément. Ensemble, utilisez-le:
// Ajouter un événement approprié écouteurobj.addeventListener ("Cat", fonction (e) {process (e.detail)}); // créer et expédier l'événement EventVar = new Customevent ("Cat", {"Detail": {"HazcheeseeseBurger": True}}); Obj.DispatchEvent (événement);Utilisez des événements personnalisés pour prêter attention aux problèmes de compatibilité, mais l'utilisation de jQuery est beaucoup plus simple:
// lier l'événement personnalisé $ (élément) .on ('myCustomevent', function () {}); // Trigger Event $ (élément) .trigger ('myCustomevent'); En outre, vous pouvez transmettre plus d'informations sur les paramètres lors du déclenchement d'un événement personnalisé: $ ("p") .on ("myCustomevent", fonction (événement, myname) {$ (this) .text (myname + ", salut là!");}); $ ("Bouton") .click (function () {$ ("p") .trigger ("mycustomevent", ["John");});Les événements personnalisés JavaScript sont différents des événements auto-personnalisés tels que Click and Soumettre. Avant de décrire les avantages des événements personnalisés, jetons un coup d'œil à un exemple d'événements personnalisés:
<div id = "TestBox"> </ div> // Créer un événement var evt = document.createEvent ('event'); // définir le type d'événement evt.initevent ('customevent', true, true); // écouter l'événement var obj = document.getElementById ('TestBox'); obj.addeventListener ('Customevent', fonction () {console.Log ('Circyvent Event de Customevent', fonction ()). déclenché ');}, false);Pour des effets spécifiques, vous pouvez vérifier la démo. Entrez obj.dispatchEvent (EVT) dans la console. Vous pouvez voir que l'événement de sortie de la sortie a déclenché "dans la console, indiquant que l'événement personnalisé a été déclenché avec succès.
Dans ce processus, la méthode CreateEvent crée un événement vide EVT, puis utilise la méthode Initevent pour définir le type de l'événement comme l'événement personnalisé convenu, puis écoute l'élément correspondant. Ensuite, utilisez DispatchEvent pour déclencher l'événement.
C'est vrai, le mécanisme des événements personnalisés est comme un événement normal - écouter des événements, écrire des opérations de rappel et exécuter des rappels après le déclenchement des événements. Mais la différence est que les événements personnalisés sont complètement contrôlés par nous, ce qui signifie qu'un découplage JavaScript est implémenté. Nous pouvons contrôler de manière flexible plusieurs opérations associées mais logiquement complexes en utilisant le mécanisme des événements personnalisés.
Bien sûr, vous avez peut-être deviné que le code ci-dessus ne prend pas effet dans les versions inférieures de IE. En fait, CreateEvent () n'est pas pris en charge dans les versions IE8 et ci-dessous de IE, mais il existe la méthode privée FireEvent () de IE, mais malheureusement, FireEvent ne prend en charge que le déclenchement d'événements standard. Par conséquent, nous ne pouvons utiliser qu'une seule méthode spéciale et simple pour déclencher un événement personnalisé.
// type est un événement personnalisé, tel que type = 'gardevent', le rappel est la fonction de rappel réellement définie par le développeur obj [type] = 0; obj [type] ++; obj.attachevent ('onPropertyChange', fonction (événement) {if (event.propertyName == type) {callback.call (obj);}});Le principe de cette méthode consiste en fait à ajouter une propriété personnalisée au DOM et à écouter l'événement PropertyChange de l'élément. Lorsque la valeur d'une certaine propriété dans le DOM change, le rappel PropertyChange sera déclenché, puis dans le rappel est déterminé si la propriété modifiée est notre propriété personnalisée. Si c'est le cas, le rappel réellement défini par le développeur sera exécuté. Cela simule le mécanisme des événements personnalisés.
Afin de permettre au mécanisme des événements personnalisés de coopérer avec le déclenchement d'écoute et simulé des événements standard, un mécanisme d'événements complet est donné ici. Ce mécanisme prend en charge la surveillance des événements standard et des événements personnalisés et supprime les opérations de déclenchement d'écoute et simulées. Il convient de noter que pour rendre la logique du code plus claire, il est convenu que les événements personnalisés ont le préfixe de «personnalisé» (par exemple: Customtest, CustomAlert).
/ ** * @Description contient l'écoute d'événements, la suppression et la simulation déclencheurs de l'événement, les appels de chaîne de support * * / (fonction (fenêtre, undefined) {var ev = window.ev = window. $ = function (élément) {return new ev.fn.init (élément);}; // ev Object Construction ev.fn = ev.prototype = {init: function (élément) {this.Element = (élément. 1)? _That.element.addeventListener (type, callback, false);} else if (_that.element.attachevent) {/ ** * @Supported pour ie5 + * / // Traitement d'événements personnalisés if (type.indexof ('personnalisé')! = -1) {if (iSnan) } var fnev = fonction (événement) {event = event? ! _That.Element [Callback '+ Callback]) {_That.Element [Callback' + Callback] = FNEV;} // Type d'événements standard} {_That.Element.AtTachevent (sur les autres, Callback); return _That;}, / ** * supprimer l'événement écoutant * * @param {String} Type d'événement Type d'événement * @param {fonction} Fonction de rappel de rappel * / Suppter: Function (Type, Callback) {var _That = this; _That.Element.reMoveEventListener (type, rappel, false);} else if (_That.Element.detachevent) {/ ** * @Supported pour IE5 + * // _That.Element.DeTachevent ('OnProperTyChange', _That.Element [Callback '+ Callback]); * @Supported pour les autres * / _That.Element ['sur' + type] = null;} return _That; if (_That.Element.DispatchEvent) {// Créer un événement var evt = document.CreateEvent ('Event'); Type.Indexof (Custom ')! = -1) {_That.Element [Type] ++;} else {_That.Element.Fireevent (sur' + Test Case 1 (Test d'événements personnalisés) // CAS TEST 1 (test d'événement personnalisé) // introduire le mécanisme d'événements // ... // Catch Domvar testbox = document.getElementyId ('TestBox'); // Callback Fonction 1Function Tigerevent () {console.log ('Trigger a Custom Event CustomConsole');} // Callback Fonction 2Fonction TriggerAgain () {ConsoleLLOG (Callback Fonction 2Fonction TriggerAgain () {Consolet (Callback Fonction 2Fonction TriggerAg événement CustomConsole ');} // Encapsulation TestBox = $ (testbox); // lier deux fonctions de rappel en même temps, prenant en charge l'appel de la chaîne à TestBox.add (' CustomConsole ', Tigerevent) .Add (' CustomConsole ', TriggerAgain);Le code complet est en démo.
Après avoir ouvert la démo, appelez TestBox.trigger («CustomConsole») dans la console pour déclencher l'événement personnalisé seul. Vous pouvez voir que la console sortira deux invites, puis entrez TestBox.Remove ('CustomConsole', TriggerAgain) pour supprimer le prochain écouteur. À l'heure actuelle, utilisez TestBox.trigger («CustomConsole») pour déclencher l'événement personnalisé. Vous pouvez voir que la console ne publie qu'une seule invite, c'est-à-dire que le prochain écouteur est supprimé avec succès. Toutes les fonctions du mécanisme de l'événement fonctionnent normalement.