Реализовать простой метод включения и выключения
представлять:
Объект события:
Funclist: {}, // Сохранить метод, связанный с делегатом
iefunclist: {} // Сохранить метод привязки в IE
Методы включения и выключения в объекте события называются в основном
Event.Addevent, Event.DelegateHandle Методы
Event.Addevent: позвоните в базовый AddEventListener, чтобы добавить событие прослушивания
Event.delegatehandle: Когда происходит событие, когда событие пузырится, определите элемент делегата события и выполняет соответствующую функцию обратного вызова.
addEvent / offevent:
obj.addeventlistener (type, fn, false);
obj.removeeventlistener (type, fn, false);
Код - Event.js
/** * addEvent * Автор [email protected] */window.event = {}; var event = {funclist: {}, // Сохранить метод, связанный с делегированием iefunclist: {}, // Потому что метод, который должен быть сохранен в соответствии с IE on: function (obj, selector, type, fn, fn) {if (! var fnnew = event.delegatehandle (obj, селектор, fn); Event.Addevent (obj, type, fnnew); /* Сохранить связанный метод в evence.funclist для дальнейшего распределения операций*/ 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) { /* Реализуйте метод преобразования делегата. Функция обратного вызова будет выполнена только тогда, когда событие пузырится и поднимется. */ var func = function (event) {var event = event || window.event; var target = event.srcelement || Event.Target; var parent = target; Функция содержит (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; // by Tagname} вернуть false; } while (parent) { /* Если запускаемый элемент является ребенком (селектор) элемента. */ if (obj == parent) {return false; // Сам элемент триггера} if (содержит (родитель, селектор)) {fn.call (obj, event); возвращаться; } parent = parent.parentnode; }}; вернуть фанк; }, addEvent: function (target, type, fn) {if (! target) вернуть false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type, fn, false); } else {// для т.е. 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, аргументы); }; obj.attachevent ("on" + type, event.iefunclist [obj] [type] [fn]); }} if (target.length> = 0 && target! == Window &&! }}, offevent: function (target, type, fn) {if (! target) вернуть false; var remove = function (obj) {if (obj.addeventListener) {obj.removeeventListener (type, fn, false); } else {// для т.е. 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 &&! }},};
Код - 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 = " src = "addevent.js"> </script> <script> (function () {/* demo demo*/var $ id = function (id) {return document.getElementbyId (id) || id;} var outer = $ id ("Содержание"), btn = $ id ("text"); event.on (outter, 'кнопка', ",", добавить); Event.on (Overt, '#unbind', "Click", удалить); var target = e.srcelement || e.target; }}) (); </script> </body> </html>