标签：
事件系统是一个框架非常重要的部分，用于响应用户的各种行为。
浏览器提供了3个层次的api，用于响应用户的各种行为。
1.最原始的是写在元素标签内。
2.再次是脚本内，以el.onXXX = function绑定的方式，统称为DOM0事件系统。
3.最后是多投事件系统，一个元素的同一类型事件可以绑定多个回调，统常称为DOM2事件系统。
由于浏览器大战，现存两套API。
IE与opera：
绑定事件：el.attachEvent("on"+ type, callback)
卸载事件：el.detachEvent("on"+ type. callback)
创建事件：el.document.createEventObject()
派发事件：el.fireEvent(type,event)
w3c：
绑定事件：el.addEventListener(type,callback,[phase])
卸载事件：el.removeEventListener(type,callback,[phase])
创建事件：el.createEvent(types)
初始化事件：event.initEvent()
派发事件：el.dispatchEvent(event)
从api的数量与形式来看，w3c提供的复杂很多，相对于也强大很多，下面我们将逐一分析
首先我们先来几个简单的例子，没必要动用框架。不过事实上，整个事件系统就建立在它们的基础上。
function addEvent (el, callback, useCapture) { if(el.dispatchEvent){//w3c优先 el.addEventListener(type, callback, !!useCapture ); } else { el.attachEvent( "on"+ type, callback ); } return callback; //返回callback方便卸载时用 } function removeEvent (el, type, callback, useCapture) { if (el.dispatchEvent) { //w3c优先 el.removeEventListener (type, callback, !!useCapture); } else { el.detachEvent( "on"+type, callback ) } } function fireEvent (el, type, args, event) { args = args || {} if (el.dispatchEvent) { //w3c优先 event = document.createEvent("HTMLEvents"); event.initEvent(type, true, true); } else { event = document.createEventObject(); } for (var i in args) if (args.hasOwnProperty(i)) { event[i] = args[i] } if (el.dispatchEvent) { el.dispatchEvent(event); } else { el.fireEvent(‘on‘+type , event) } }
一，onXXX绑定方式的缺陷
onXXX既可以写在html标签内，也可以独立出来，作为元素节点的一个特殊属性来处理，不过作为一个古老的绑定方式，它很难预料到人们对这方面的扩展。
总结下来有以下不足:
1.onXXX对DOM3新增的事件或FF某些私有实现无法支持，主要有以下事件：
DOMActivate
DOMAttrModified
DOMAttributeNameChanged
DOMCharacterDataModified
DOMContentLoaded
DOMElementNameChanged
DOMFocusIn
DOMFocusOut
DOMMouseScroll
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDcouemnt
DOMSubtreeModified
MozMousePixelScroll
2.onXXX只允许元素每次绑定一个回调，重复绑定冲掉之前的绑定
3.onXXX在IE下回调没有参数，在其他浏览器回调的第一个参数是事件对象。
4.onXXX只能在冒泡阶段可用。
二，attachEvent的缺陷
attachEvent是微软在IE5添加的API,Opera也支持，也对于onXXX方式，它可以允许同一种元素同一种事件绑定多个回调，也就是所谓多投事件机制。但带来的麻烦只多不少，存在以下几点缺陷。
1.ie下只支持微软的事件系统，DOM3事件一概不支持。
2.IE下attchEvent回调中的this不是指向被绑定元素，而是window!
3.IE下同种事件绑定多个回调时，回调并不是按照绑定时的顺序依次触发的！
4.IE下event事件对象与w3c的存在太多差异了，有的无法对上号，比如currentTarget
5.IE还是只支持冒泡阶段。
关于事件对象，w3c是大势所趋，在IE9支持W3c那一套API时，这对我们实现事件代理非常有帮助。
三，addEventListener的缺陷
w3c这一套API也不是至善至美，毕竟标准总是滞后于现实，剩下的标准浏览器各有自己的算盘，它们之间也有不一致的地方。
1.新事件非常不稳定，可能还有普及就开始被废弃，在早期的sizzle选择器引擎中，有这么几句。
document.addEventListener("DOMAttrModified", invalidate, false);
document.addEventListener("DOMNodeInserted", invalidate, false);
document.addEventListener("DOMNodeRemoved", invalidate, false);
现在这三个事件被废弃了（准确的说，所有变动事件都完蛋了），FF14和chrome18开始使用MutationObserver代替它。
2.Firefox不支持focusin,focus事件，也不支持DOMFocusIn,DOMFocusOut,现在也不愿意用mouseWheel代替DOMMouseScroll。chrome不支持mouseenter与mouseleave.
因此，不要以为标准浏览器就肯定实现了w3c标准事件，所有特征侦测必不可少。
3.第三个，第四个，第五个标准参数。
第三个参数，useCapture只有非常新的浏览器才是可选项。比如FF6或之前是可选的，为了安全起见，确保第三个参数为布尔。
4.事件成员的不稳定。
w3c是从浏览器商抄过来的，人家用了这么久，难免与标准不一致。
ff下event.timeStamp返回0的问题，这个bug,2004年就有人提交了，直到2011年才被修复。
Safari下event.target可能返回文本节点
event.defaultPrevented,event.isTrusted与stopImmediatePropagation方法，之前标准浏览器都统一用getpreventDefault方法做这个事情，在jQuery源码中，发现它是用isDefaultPrevented来处理。
isTrusted属性用于表示当前事件是否是由用户行为触发，比如是用一个真实的鼠标点击触发click事件，还是由一个脚本生成的（使用事件构造方法，比如event.initEvent）。isTrusted请多关注
5.标准浏览器没有办法模拟像IE6-8的proprtychange事件。
虽然标准的浏览器有input, DOMAttrModified,MutationObserver，但比起propertychange弱爆了。propertychange可以监听多种属性变化，而不单单是value值。另外它不区分attribute和property。因此，无论是通过el.xxx = yyy 还是el.setAttribute(xxx,yyy)都接触此事件。
http://www.cnblogs.com/rubylouvre/archive/2012/05/26/2519263.html (判断浏览器是否支持DOMAttrModified)
四，Dean Edward的addEvent.js源码分析
这是一个prototype时代早期出现的一个事件系统。jQuery事件系统源头。亮点如下：
1.有意识的屏蔽IE与w3c在阻止默认行为与事件传播接口的差异。
2.处理ie执行回调时的顺序问题
3.处理ie的this指向问题
4.没有平台检测代码，因为是使用最通用最原始的onXXX构建
5.完全跨浏览器（IE4与NS4）。
此处省略源码分析
http://dean.edwards.name/weblog/2005/10/add-event/
// written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else { // assign each event handler a unique ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; // create a hash table of event types for the element if (!element.events) element.events = {}; // create a hash table of event handlers for each element/event pair var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; // store the existing event handler (if there is one) if (element["on" + type]) { handlers[0] = element["on" + type]; } } // store the event handler in the hash table handlers[handler.$$guid] = handler; // assign a global event handler to do all the work element["on" + type] = handleEvent; } }; // a counter used to create unique IDs addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else { // delete the event handler from the hash table if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } } }; function handleEvent(event) { var returnValue = true; // grab the event object (IE uses a global event object) event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); // get a reference to the hash table of event handlers var handlers = this.events[event.type]; // execute each event handler for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; function fixEvent(event) { // add W3C standard event methods event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; };
不过在Dean Edward对应的博文中就可以看到许多指正与有用的patch。比如说，既然所有的修正都是冲着IE去的，那么标准浏览器用addEventListener就行。有的还提到，在iframe中点击事件时，事件对象不对的问题，提交以下有用的补丁。
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
其中，第54条回复，直接导致了jQuery数据缓存系统的产生，为了避免交错引用产出的内存泄露，建议元素分配一个uuid,所有的回调都放在一个对象中存储。
但随着事件的推移，使用者发现onXXX在IE存在不可消除和弥补的内存泄露，因此，翻看jQuery早期的版本，1.01是照抄Dean Edward的，1.1.31版本，开始吸收54条uuid的建议，并使用attach/removeEventListener绑定事件——每个元素只绑定一次。然后所有回调都在类似handleEvent的函数中调用。
（此章篇幅较长，以下即将更新：）
五,jQuery1.8.2的事件模块概述
六,jQuery.event.add源码解读
七，jQuery.event.remove的源码解读
八，jQuery.event.dispatch的源码解读
九，jQuery.event.trigger的源码解读
十，jQuery对事件对象的修复
十一，滚轮事件的修复
十二，mouseenter与mouseleave事件的修复
十三,focus与focusout事件的修复
十四，旧版本下IE的submit的事件代理实现
十五，oninput事件的兼容性性处理
上一章：第十章：属性模块 下一章：第十二章：章异步处理
标签：
原文地址：http://www.cnblogs.com/ahthw/p/4697139.html
