Implementar um método simples de ativação e desativação
introduzir:
Objeto de evento:
FUNCLIST: {}, // Salvar o método vinculado por delegado
iefunclist: {} // salvar o método de ligação no ie
Os métodos ligados e desligados no objeto de evento são chamados principalmente
Event.Addevent, Event.DelegateHandle Métodos
Event.Addevent: Ligue para o AddEventListener subjacente para adicionar o evento de audição
Event.DelegateHandle: Quando ocorre um evento, à medida que o evento borbulha, determine o elemento do delegado do evento e execute a função de retorno de chamada correspondente.
AddEvent / Offevent:
obj.addeventListener (tipo, fn, false);
obj.removeEventListener (tipo, fn, false);
Código - event.js
/** * addEvent * autor [email protected] */window.event = {}; var event = {funclist: {}, // Salvar o método ligado para delegar iefunclist: {}, // porque o método ligado a ser salvo em ie em: função (obj, seletor, tipo, f) {fn) {) {fn) {); var fnnew = event.delegateHandle (obj, seletor, fn); Event.Addevent (OBJ, tipo, fnnew); /* Salvar o método ligado no evento.funclist para desbaste operações posteriormente*/ if (! Event.funclist [selettor]) {event.funclist [selettor] = {}; } if (! event.funclist [selettor] [type]) {event.funclist [seletor] [type] = {}; } Event.funclist [seletor] [type] [fn] = fnNew; }, desligado: function (obj, seletor, tipo, fn) {if (! obj ||! selettor ||! event.funclist [seletor]) {return false; } var fnNew = event.funclist [seletor] [tipo] [fn]; if (! fnnew) {return; } Event.offevent (obj, tipo, fnnew); Event.funclist [seletor] [tipo] [fn] = null; }, delegateHandle: function (obj, seletor, fn) { /* Implemente o método de conversão do delegado. A função de retorno de chamada será executada somente quando o evento borbulhar e aumentar. */ var func = function (evento) {var event = event || Window.Event; VAR Target = Event.SrceMement || Event.Target; var pai = destino; a função }} if (elmname.split ('.') [1]) {// por classe if (hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == elmname.touppercase ()) {return true; // por tagname} retornar false; } while (pai) { /* se o elemento acionado for um filho do elemento (seletor). */ if (obj == pai) {return false; // O elemento de gatilho é ele mesmo} if (contenha (pai, seletor)) {fn.call (obj, evento); retornar; } parent = parent.parentNode; }}; retornar func; }, addEvent: function (destino, tipo, fn) {if (! Target) return false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (tipo, fn, false); } else {// para ie if (! event.iefunclist [obj]) event.iefunclist [obj] = {}; if (! event.iefunclist [obj] [type]) event.iefunclist [obj] [type] = {}; Event.iefunclist [obj] [type] [fn] = function () {fn.apply (obj, argumentos); }; obj.attachevent ("on" + type, event.iefunclist [obj] [tipo] [fn]); }} if (Target.Length> = 0 && Target! == Window &&! Target.TagName) {for (var i = 0, l = Target.length; i <l; i ++) {add (Target [i])}}} else {add (Target); }}, ofensivo: function (destino, tipo, fn) {if (! Target) return false; var remoT = function (obj) {if (obj.addeventListener) {obj.removeEventListener (tipo, fn, false); } else {// para 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] [tipo] [fn] = {}; }} if (Target.Length> = 0 && Target! == Window &&! Target.TagName) {for (var i = 0, l = Target.Length; i <l; i ++) {Remow (Target [i])}}} else {Remover (Target); }},};
Código - Demo.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> test </title> </ad Head> <body> <p> Evento de teste </p> <div id = content> <ul> <li> id = "btn3"> 3 </button> </li> <li> <button id = "btn4"> 4 </button> </li> <li> <button id = "btn5"> 5 </button> </li> </ul> <but Id = "desbruend"> não src = "addEvent.js"> </script> <cript> (function () {/* demonstração*/var $ id = function (id) {return document.getElementById (id) || id;} var outer = $ id ("content"), btn = $ "(" text "); event.on; Evento.on (externo, "clique em" Remover); Var Target = E.RCELENTE || E.Target; }}) (); </script> </body> </html>