javascript实现简单的on事件绑定

实现一个简单的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 laynezhou@tencent.com */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 idif （item.id && item.id === elmName.split（"#"）[1]） {return true;}}if （elmName.split（"."）[1]） { //by classif （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 ieif （！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 ieif （！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>