(word完整版)javascript看qq中多事件绑定的执行顺序.doc

(word完整版)javascript看qq中多事件绑定的执行顺序
(word完整版)javascript看qq中多事件绑定的执行顺序
(word完整版)javascript看qq中多事件绑定的执行顺序
事件绑定的执行次序
在W3C的标准下，事件绑定使用的是HYPERLINK”http://www。w3。org/TR/DOM-Level—2-Events/events.html"\l”Events—EventTarget-addEventListener”addEventLisenter。
但微软这家伙经常不按常理出牌.它提供的事件绑定方法是HYPERLINK"http：//msdn.microsoft.com/en—us/library/ms536343（v=VS。85）.aspx"attachEvent。
关于attachEvent的种种不足，先不一一列举。或许我们已经忍受着用attachEvent来绑定事件。
//object.attachEvent（event，function);
el。attachEvent（’onclick',method）；
但当在同一元素上绑定多次，你就会知道，微软的这个私人的方法又是多么“不可理喻”.
el。attachEvent（”onclick”,method1);
el。attachEvent（"onclick",method2）；
el。attachEvent（"onclick"，method3);
el.attachEvent(”onclick”,method4）;
在各个IE下运行，点击el后，各个方法的执行次序是:
IE6/IE7:method2—>method4-〉method3—〉method1
IE8:method4—〉method3->method2-〉method1
IE9：method1—>method2-〉method3—〉method4
IE6/7是一种看不出规律的随机执行，IE8是逆序执行，IE9是顺序执行。
无论常识还是W3C标准,这种同一个事件绑定了多个方法的情况，方法的执行次序都应该是先绑定先执行。从IE6－IE9的演变，可以看得出微软还是有在不断改进的.但毕竟各个版本的IE存在，使得我们不得不注意绑定在同一事件上的多个方法之间不要有顺序依赖。
YUI2的事件绑定并没有对执行次序做兼容，如果有些场景的确需要绑定多个方法且方法间需要顺序执行。那我们就只能自己实现了，大致思路是:在先判断绑定的el对象上是否已经同一个事件类型的handlers，如果有则不会重复绑定而是把该对象的handler合并到handlers中成为一个方法，相当于这样functionc(){a(）；b（）;｝,按照顺序的压入方法实现在IE下不会出现绑定多个方法时能顺序执行。
functionaddEvent(el，type,handler)｛
if(el。attachEvent）｛//IE
//为元素的事件类型创建一个哈希表
el._events=el._events|｜｛｝;
if（!handler）｛return;}
//取得事件处理函数的数组的引用
varhandlers=el._events[type］；
if（handlers）{
if(typeofhandler._index===’undefined'｜｜handlers［handler._index]!==handler）｛
//将事件处理函数存入数组
handlers。push（handler）；
//为事件处理函数增加索引
handler._index=handlers。length-1;
}
｝else{
//创建事件处理函数的数组
el._events［type］=[］;
//缓存总的事件绑定函数
el。_eventHandlers=function(e){
e=e｜｜window。event;
varhandlers=el._events［type]；
//依次执行所有缓存的事件处理方法
for（vari=0，len=handlers.length；i<len；i++){
typeofhandlers[i]===’function'＆&handlers[i］(e）;
}
};
//绑定一次事件，来处理所有绑定在该事件上的所有函数
el。attachEvent('on'+type,el。_eventHandlers);
addEvent(el,type,handler）;
}
｝else{//现代浏览器
el。addEventListener（type,handler，false）；
｝
｝
相应的，移除事件的方法也要做一些处理。
functionremoveEvent（el，type，handler）