Implémenter une méthode simple et désactivée
introduire:
Objet de l'événement:
funclist: {}, // Enregistrez la méthode liée par délégué
iefunclist: {} // Enregistrez la méthode de liaison sous IE
Les méthodes ON et OFF dans l'objet de l'événement sont appelées principalement
Event.Addevent, Event.DelegateHandle Méthodes
Event.addevent: appelez l'AdveveventListener sous-jacent pour ajouter l'événement d'écoute
Event.delegateHandle: Lorsqu'un événement se produit, à mesure que l'événement bouillonne, déterminez l'élément du délégué d'événement et exécutez la fonction de rappel correspondante.
addevent / offenvent:
obj.addeventListener (type, fn, false);
obj.RemoveEventListener (Type, fn, false);
Code - event.js
/ ** * AddEvent * Auteur [email protected] * / window.event = {}; var event = {funclist: {}, // Enregistrer la méthode liée à déléguer iefunclist: {}, // Parce que la méthode liée à être enregistrée sous IE sur: fonction (obj, sélecteur, type, fn) {if (!! var fnnew = event.delegateHandle (obj, sélecteur, fn); Event.addevent (obj, type, fnnew); / * Enregistrez la méthode liée dans event.funclist pour les opérations de non-non-libellur } if (! event.funclist [sélecteur] [type]) {event.funclist [sélecteur] [type] = {}; } Event.funclist [sélecteur] [type] [fn] = fnnew; }, off: function (obj, sélecteur, type, fn) {if (! Obj ||! Selector ||! event.funclist [sélecteur]) {return false; } var fnnew = event.funclist [sélecteur] [type] [fn]; if (! fnnew) {return; } Event.offEvent (obj, type, fnnew); Event.funclist [sélecteur] [type] [fn] = null; }, DelegateHandle: function (obj, sélecteur, fn) {/ * implémenter la méthode de conversion du délégué. La fonction de rappel ne sera exécutée que lorsque l'événement bouillonne et monte. * / var func = fonction (événement) {var event = event || window.event; var cible = event.srcelement || event.target; var parent = cible; fonction contient (item, elmname) {if (elmname.split ('#') [1]) {// par id if (item.id && item.id === elmname.split ('#') [1]) {return true; }} if (elmname.split ('.') [1]) {// par classe if (hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == elmname.touppercase ()) {return true; // par tagname} return false; } while (parent) {/ * Si l'élément déclenché est un enfant de l'élément (sélecteur). * / if (obj == parent) {return false; // L'élément de déclenchement est lui-même} if (contenant (parent, sélecteur)) {fn.call (obj, événement); retour; } parent = parent.parentNode; }}; retourner func; }, addEvent: function (cible, type, fn) {if (! Target) return false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type, fn, false); } else {// pour ie if (! event.iefunclist [obj]) event.iefunClist [obj] = {}; if (! event.iefunclist [obj] [type]) event.iefunclist [obj] [type] = {}; Event.iefunclist [obj] [type] [fn] = fonction () {fn.apply (obj, arguments); }; obj.attachevent ("on" + type, event.iefunclist [obj] [type] [fn]); }} if (target.length> = 0 && cible! == window &&! Target.tagname) {for (var i = 0, l = cible.length; i <l; i ++) {add (cible [i])}} else {add (cible); }}, offenvent: fonction (cible, type, fn) {if (! Target) return false; var supprimer = fonction (obj) {if (obj.addeventListener) {obj.reMoveEventListener (type, fn, false); } else {// pour ie if (! event.iefunclist [obj] ||! event.iefunClist [obj] [type] ||! event.iefunClist [obj] [type] [fn]) {return; } obj.detachevent ("on" + type, event.iefunclist [obj] [type] [fn], false); Event.iefunclist [obj] [type] [fn] = {}; }} if (Target.length> = 0 && Target! == Window &&! Target.tagname) {for (var i = 0, l = cible.length; i <l; i ++) {dis do dans (cible [i])}} else {dispos (cible); }},};
Code - Demo.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title></head><body><p>Test Event </p><div id=content> <ul> <li><button id="btn1">1</button></li> <li><button id="btn2">2</button></li> <li><button id = "btn3"> 3 </ bouton> </li> <li> <Button id = "btn4"> 4 </ bouton> </li> <li> <Button id = "btn5"> 5 </li> </li> </ul> <Button id = "Unbind"> Unbinding </siton> </v> <p id = "text"> </p> < src = "addEvent.js"> </ script> <cript> (function () {/ * DEMO DEMO * / var $ id = function (id) {return document.getElementyid (id) || id;} var exter = $ id ("contenu"), btn = $ add); Event.on (extérieur, «unbride», «cliquez», supprimez); var Target = E.Srcelement || }}) (); </cript> </ body> </html>