Implementieren Sie eine einfache und ausgeschaltete Methode
einführen:
Ereignisobjekt:
Funclist: {}, // Speichern Sie die durch den Delegieren gebundene Methode
Iefunclist: {} // Speichern Sie die Bindungsmethode unter IE
Die Ein- und Aus -Methoden im Ereignisobjekt werden hauptsächlich aufgerufen
Event.AdDevent, Event.DelegateHandle Methoden
Event.AdDevent: Rufen Sie den zugrunde liegenden AddEventListener an, um das Hörereignis hinzuzufügen
Ereignis.DelegateHandle: Wenn ein Ereignis auftritt, wie das Ereignis auftritt, bestimmen Sie das Element des Ereignisdelegiertens und führen Sie die entsprechende Rückruffunktion aus.
AddEvent / Offevent:
obj.addeventListener (Typ, fn, false);
obj.removeventListener (Typ, fn, false);
Code - Event.js
/** * addEvent * Autor [email protected] */window.event = {}; var event = {funclist: {}, // Speichern Sie die Methode, die iefunclist delegieren Sie Iefunclist: {}, //, weil die Methode, die unter IE gespeichert werden soll: Funktion (obj, selektor, typern, type, typen, fn) {if ({wenn var fnnew = event.delegateHandle (obj, selektor, fn); Event.AdDeVent (OBJ, Typ, fnnew); /* Speichern Sie die gebundene Methode in Ereignis.Funclist zum Entbinden von Operationen später*/ 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, selektor, type, fn) {if (! obj ||! selector ||! event.funclist [selector]) {return false; } var fnnew = event.funclist [selector] [type] [fn]; if (! fnnew) {return; } Event.OffEvent (OBJ, Typ, fnnew); Ereignis.Funclist [Selector] [Typ] [fn] = null; }, delegateHandle: function (obj, selector, fn) { /* implementieren Sie die Conversion -Methode des Delegiertens. Die Rückruffunktion wird nur ausgeführt, wenn die Ereignisblöcke und steigt. */ var func = function (Ereignis) {var event = Ereignis || Fenster.Event; var target = event.srcelement || Event.Target; var parent = Ziel; Funktion enthält (item, Elmname) {if (Elmname.split ('#') [1]) {// by id if (item.id && item.id === Elmname.split ('#') [1]) {return true; }} if (elmname.split ('.') [1]) {// by Class if (hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == Elmname.touppercase ()) {return true; // von Tagname} return false; } while (übergeordnet) { /* Wenn das ausgelöste Element ein Kind des (Selektor-) Elements ist. */ if (obj == parent) {return false; // Das Triggerelement ist selbst} if (enthält (übergeordnet, selektor)) {fn.call (OBJ, Ereignis); zurückkehren; } parent = parent.parentnode; }}; Func zurückgeben; }, addEvent: function (Ziel, Typ, fn) {if (! target) return false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type, fn, false); } else {// für IE if (! Event.EFUCNCLIST [obj]) Ereignis.EfeNclist [obj] = {}; if (! Event.EFUCNCLIST [OBJ] [Typ]) Ereignis. Ereignis.EFUCNCLIST [OBJ] [Typ] [fn] = function () {fn.apply (obj, argumente); }; obj.attachEvent ("on" + Typ, Ereignis. }} if (target.length> = 0 && target! }}, Offevent: Funktion (Ziel, Typ, fn) {if (! Ziel) return false; var remove = function (obj) {if (obj.addeventListener) {obj.removeEventListener (Typ, fn, false); } else {// für IE if (! Event.EFUCNCLIST [obj] ||! Event.EFUCNCLIST [OBJ] [Typ] ||! Ereignis.iefunclist [obj] [Typ] [fn]) {return; } obj.detacheEvent ("on" + Typ, Ereignis.EFUCNCLIST [OBJ] [Typ] [fn], falsch); Event.EFNUNCLIST [OBJ] [Typ] [fn] = {}; }} if (target.length> = 0 && target! }},};
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 </button> </li> <li> <button id = "btn4"> 4 </button> </li> <li> <button id = "btn5"> 5 </button> </li> </ul> <button id = "unbind"> unbinding </button> </div> <p id = "text"> </pl. 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 (äußere, "#unBind", "Klicken Sie", entfernen Sie eine Taste, um zu sehen, ob es eine Ereignisreaktion gibt. var target = e.srcelement || E.Target; }}) (); </script> </body> </html>