Méthodes communes de liaison des événements: liaison traditionnelle, méthode de liaison W3C et méthode de liaison à savoir . Cependant, ce qui est important pour nous dans le développement réel est de nécessiter une méthode de liaison générale et cross-browser. Si nous recherchons sur Internet, nous trouverons de nombreuses méthodes. Voici quelques méthodes plus connues:
Avant de commencer le semestre, nous devons discuter des exigences d'une bonne méthode Addevevent () devrait répondre:
un. La même poignée d'événements qui prend en charge le même élément peut lier plusieurs fonctions d'écoute;
né Si la même fonction est enregistrée plusieurs fois sur la même poignée d'événement du même élément, toutes les inscriptions après la première inscription seront ignorées;
c. Cet dans le corps de fonction devrait pointer vers le nœud qui traite l'événement (comme le nœud qui exécute actuellement le gestionnaire d'événements);
d. L'ordre d'exécution de la fonction d'écoute doit être exécuté dans l'ordre lié;
e. N'utilisez pas d'événement = événement || window.event; dans le corps de fonction pour normaliser l'objet de l'événement;
1. La fonction Addevevent () écrite par John Reass
fonction addEvent (obj, type, fn) {if (obj.attachevent) {obj ['e' + type + fn] = fn; obj [type + fn] = fonction () {obj ['e' + type + fn] (window.event);} obj.attachevent ('on' + type, obj [type + fn]); } else obj.addeventListener (type, fn, false); } fonction reousEvent (obj, type, fn) {if (obj.detachevent) {obj.detachevent ('on' + type, obj [type + fn]); obj [type + fn] = null; } else obj.reMoveEventListener (type, fn, false); }Il est vraiment surprenant que cette fonction soit si simple et facile à comprendre. Ensuite, nous devons encore examiner les cinq exigences ci-dessus:
Satisfait du premier point;
Je devais être satisfait des troisième et cinquième points;
Pour le deuxième point, il n'est pas satisfait car addEventListener () ignore l'enregistrement en double, contrairement à attachEvent ();
Cependant, le quatrième point n'est pas satisfait, car la norme DOM ne détermine pas l'ordre des fonctions de traitement du temps pour appeler un objet, il ne faut donc pas tenir pour acquis qu'ils sont appelés dans l'ordre d'enregistrement.
Mais cette fonction est toujours une très bonne fonction.
2. La fonction addevent () écrite par Dean Edward
fonction addevevent (élément, type, gestionnaire) {if (! Handler. $$ GUID) Handler. $$ GUID = addEvent.guid ++; if (! element.events) element.events = {}; Var Handlers = element.Events [Type]; if (! Handlers) {Handlers = element.Events [type] = {}; if (élément ["on" + type]) {Handlers [0] = élément ["on" + type]; }} Handlers [Handler. $$ GUID] = Handler; élément ["on" + type] = handleEvent;} addEvent.guid = 1; fonction reousEvent (élément, type, gestionnaire) {if (element.events && élément.events [type]) {delete element.events [type] [Handler. $$ GUID]; }} Fonction HandleEvent (événement) {var returnValue = true; événement = événement || FixEvent (Window.Event); var handlers = this.events [event.type]; pour (var i dans les gestionnaires) {this. $$ handleEvent = Handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} return returnValue;}; fonction fixevent (événement) {event.preventDefault = fixeVent.PreventDefault; event.stoppropagation = fixeEvent.stoppropagation; événement de retour;}; fixeEvent.PreventDefault = function () {this.returnvalue = false;}; fixeEvent.Stoppropagation = function () {this.cancelbubble = true;};Cette fonction utilise des méthodes de liaison traditionnelles , donc elle fonctionne dans tous les navigateurs sans provoquer de fuites de mémoire.
Mais pour les 5 points proposés à l'origine, la fonction ne satisfait que les quatre premiers points. Seul le dernier point n'est pas satisfait, car en JavaScript, l'ordre d'exécution des instructions pour / dans les instructions n'est pas spécifiée dans l'ordre de cession, bien que la plupart du temps soit exécuté dans l'ordre attendu, de sorte que l'ordre de cette déclaration peut être différent dans différentes versions JavaScript ou implémentations.
3. Amélioration de la fonction AddEvent () de Dean Edward
Array.prototype.indexof = fonction (obj) {var result = -1, longueur = this.length, i = longueur - 1; for (; i> = 0; i--) {if (this [i] == obj) {result = i; casser; }} Retour Result;} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.Atend = function (obj, nodUp) {if (! (nodUp && this.contains (obj)))) {this.Length] = obj; }} Array.prototype.remove = function (obj) {var index = this.indexof (obj); if (! index) return; return this.splice (index, 1);}; fonction addevevent (élément, type, fun) {if (! element.events) element.events = {}; Var Handlers = element.Events [Type]; if (! Handlers) {Handlers = element.Events [type] = []; if (élément ['on' + type]) {Handlers [0] = élément ['on' + type]; }} handlers.append (fun, true) élément ['on' + type] = handleEvent;} function doupleEvent (élément, type, fun) {if (element.events && element.events [type]) {element.events [type] .remove (fun); }} Fonction HandleEvent (événement) {var returnValue = true, i = 0; événement = événement || FixEvent (Window.Event); var handlers = this.events [event.type], longueur = handlers.length; for (; i <length; i ++) {if (Handlers [i] .call (this, event) === false) {returnValue = false; }} return returnValue;} function fixeEvent (event) {event.preventDefault = fixEvent.PreventDefault; event.stoppropagation = fixeEvent.stoppropagation; événement de retour;} fixevent.preventDefault = function () {this.returnvalue = false;}; fixeEvent.Stoppropagation = function () {this.cancelbubble = true;};Cette fonction est mon amélioration de la fonction Addevevent () de Dean Edward, qui répond pleinement aux 5 exigences initiales. J'espère que cela sera utile à l'apprentissage de tous. Merci pour votre lecture.