function addEvent(element, type, handler) { //为每一个事件处理函数分派一个唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; //为每一个"元素/事件"对创建一个事件处理程序的哈希表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; //存储存在的事件处理函数(如果有) if (element["on" + type]) { handlers[0] = element["on" + type]; } } //将事件处理函数存入哈希表 handlers[handler.$$guid] = handler; //指派一个全局的事件处理函数来做所有的工作 element["on" + type] = handleEvent; }; //用来创建唯一的ID的计数器 addEvent.guid = 1; function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent(event) { var returnValue = true; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this.events[event.type]; //执行每一个处理函数 for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; //为IE的事件对象添加一些“缺失的”函数 function fixEvent(event) { //添加标准的W3C方法 event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; };
================= 我是分割线 =================
以下是我自己的理解
此种方式为dom添加事件优点：
1、几乎支持所有浏览器
2、阻止事件冒泡及浏览器默认行为什么的都实现了
3、this始终指向发生事件的DOM
简单的原理说明：
拿click事件作说明
1、为dom添加自定义属性events事件哈唏表
events{
click:{
handle1:function(){},
hadler2:function(){},
...
},
mouseover: {
handle1:function(){},
hadler2:function(){},
.....
},
........
}
2、当dom的某个事件被触发时如：
dom.onclick = function(){
//发生了click事件
通过在dom中遍历events事件哈唏表，如果之有click事件对应的handle处理函数，就执行
}
3、移除注册的事件也是遍历events事件哈唏表delete相应的handler，(在添加时每个handler有唯一的guid)