實現一個簡單的on和off方法
介紹:
Event對象:
funcList: {}, //保存delegate所綁定的方法
ieFuncList :{} //保存ie下的綁定方法
Event 對像中的on, off 方法,主要調用
Event.addEvent, Event.delegateHandle這兩個方法
Event.addEvent: 調用底層的addEventListener添加監聽事件
Event.delegateHandle: 當發生事件之後,隨著事件的冒泡上升,判斷存在事件委託的元素,並執行對應的回調函數
addEvent / offEvent:
obj.addEventListener(type, fn, false);
obj.removeEventListener(type, fn, false);
代碼-Event.js
/** * addEvent * author [email protected] */window.Event = {};var Event = { funcList: {}, //保存delegate所綁定的方法ieFuncList: {}, //由於保存在ie下綁定的方法on: function(obj, selector, type, fn) { if (!obj || !selector) return false; var fnNew = Event.delegateHandle(obj, selector, fn); Event.addEvent(obj, type, fnNew); /* 將綁定的方法存入Event.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) { /* 實現delegate 的轉換方法，事件冒泡上升時, 符合條件時才會執行回調函數*/ var func = function(event) { var event = event || window.event; var target = event.srcElement || event.target; var parent = target; function contain(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 } return false; } while (parent) { /* 如果觸發的元素，屬於(selector)元素的子級。 */ if (obj == parent) { return false; //觸發元素是自己} if (contain(parent, selector)) { fn.call(obj, event); return; } parent = parent.parentNode; } }; return func; }, addEvent: function(target, type, fn) { if (!target) return false; var add = function(obj) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else { // for 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, arguments); }; 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); } }, offEvent: function(target, type, fn) { if (!target) return false; var remove = function(obj) { if (obj.addEventListener) { obj.removeEventListener(type, fn, false); } else { //for 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 = target.length; i < l; i++) { remove(target[i]) } } else { remove(target); } },};
代碼-DEMO.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title></head><body><p>測試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">取消綁定</button></div><p id="text"></p><script src="addEvent.js"></script><script>(function(){ /* 演示demo*/ var $id=function(id) { return document.getElementById(id) || id; } var outer = $id("content"), btn = $id("text"); Event.on(outer,'button',"click",add); Event.on(outer,'#unbind',"click",remove); //動態添加一個按鈕,查看是否有事件響應var newbtn = document.createElement("button"); var node = document.createTextNode("new button"); newbtn.appendChild(node); outer.appendChild(newbtn); function add(){ var e = arguments[0] || window.event; var target = e.srcElement || e.target; console.log("target:",target); btn.innerHTML = target.innerHTML + ' ' + e.type; } function remove(){ Event.off(outer,'button',"click",add); Event.off(outer,'#unbind',"click",remove); }})();</script></body></html>