Implementar un método simple de encendido y apagado
introducir:
Objeto del evento:
FunClist: {}, // Guardar el método unido por delegado
IEFUnClist: {} // Guarde el método de enlace en IE
Los métodos de encendido y apagado en el objeto del evento se llaman principalmente
Event.addevent, event.delegateHandle Methods
Event.addevent: llame al addEventListener subyacente para agregar el evento de escucha
Event.DelegateHandle: cuando ocurre un evento, a medida que el evento burbujea, determine el elemento del delegado del evento y ejecute la función de devolución de llamada correspondiente.
addevent / ofvent:
obj.addeventListener (tipo, fn, falso);
obj.removeEventListener (tipo, fn, falso);
Código - Event.js
/** * addEvent * autor [email protected] */window.event = {}; var event = {funClist: {}, // Guardar el método vinculado a delegar iefunClist: {}, // porque el método ligado a IE en: function (obj, selector, type, fn) {if (if (if (if ||| var fnnew = event.delegateHandle (obj, selector, fn); Event.addevent (obj, type, fnnew); /* Guardar el método vinculado en event.funClist para desabrochar operaciones más tarde*/ if (! Event.funClist [selector]) {event.funClist [selector] = {}; } if (! event.funClist [selector] [type]) {event.funClist [selector] [type] = {}; } Event.funClist [selector] [type] [fn] = fnnew; }, OFF: function (obj, selector, type, fn) {if (! obj ||! selector ||! event.funclist [selector]) {return false; } var fnnew = event.funClist [selector] [type] [fn]; if (! fnnew) {return; } Event.Offevent (obj, type, fnnew); Event.funClist [selector] [type] [fn] = null; }, DelegateHandle: function (obj, selector, fn) { /* Implemente el método de conversión de delegado. La función de devolución de llamada se ejecutará solo cuando el evento burbujee y se levante. */ var func = function (event) {var event = event || Window.event; var Target = Event.SrCelement || event.target; var parent = objetivo; La función contiene (item, elmname) {if (elmname.split ('#') [1]) {// por id if (item.id && item.id === elmname.split ('#') [1]) {return true; }} if (elmname.split ('.') [1]) {// por clase if (Hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == Elmname.ToUpperCase ()) {return true; // por tagname} return false; } while (parent) { /* Si el elemento activado es un hijo del elemento (selector). */ if (obj == parent) {return false; // El elemento de activación es en sí mismo} if (contener (parent, selector)) {fn.call (obj, evento); devolver; } parent = parent.parentnode; }}; regreso func; }, addEvent: function (target, type, fn) {if (! target) return false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type, 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] [type] [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); }}, ofvent: function (target, type, fn) {if (! target) return false; var remove = function (obj) {if (obj.addeventListener) {obj.removeEventListener (type, fn, false); } else {// para IE if (! Event.iefUnclist [obj] ||! Event.iefUnclist [obj] [type] || } obj.detachevent ("on" + type, event.iefUnclist [obj] [type] [fn], falso); Event.iefUnclist [obj] [type] [fn] = {}; }} if (target.length> = 0 && target! == window &&! Target.tagname) {for (var i = 0, l = target.length; i <l; i ++) {eliminar (target [i])}} else {eliminar (target); }},};
Código - Demo.html
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> test </title> </head> <body> <p> test Event </p> <Div Id = Content> <ul> <li> <Button ID = "BTN1"> 1 </poton> </li> <li> <button ID = "btn2"> 2 </botón de botón> </li lii id = "btn3"> 3 </boton> </li> <li> <button id = "btn4"> 4 </botton> </li> <li> <botón id = "btn5"> 5 </botón> </li> </ul> <botón ID = "sinbind"> sin findir </boton> </div> <p Id = "text"> </p> <script <script " src = "addEvent.js"> </script> <script> (function () {/* demo demo*/var $ id = function (id) {return document.getElementById (id) || id;} var oUter = $ id ("content"), btn = $ id ("text"); event.on (outer, 'booth', "hacer clic", add); Event.on (externo, '#no admite', "haga clic en", eliminar); Window.event; }}) (); </script> </body> </html>