大家应该注意的问题,在IE6/7/8下同类型事件的多个handler执行是无序的。
我们的演示程序如下,
01 <div id="d1" style="width:200px;height:200px;background:gold;"></div>
02 <script type="text/javascript">
03 function addEvent(el, type, fn){
04 if(el.addEventListener){
05 el.addEventListener(type, fn, false);
06 }else{
07 el.attachEvent('on' + type, fn);
08 }
09 }
10 var el = document.getElementById('d1');
11 function handler1(){
12 alert('test1');
13 }
14 function handler2(){
15 alert('test2');
16 }
17 function handler3(){
18 alert('test3');
19 }
20 function handler4(){
21 alert('test4');
22 }
23 function handler5(){
24 alert('test5');
25 }
26 addEvent(el, 'click', handler1);
27 addEvent(el, 'click', handler2);
28 addEvent(el, 'click', handler3);
29 addEvent(el, 'click', handler4);
30 addEvent(el, 'click', handler5);
31 </script>
以上,给div[id=d1]的click事件添加了5个handler。
程序运行后出现黄色方框,点击一下黄色区域试试看。
IE6/7/8 :无序(可多点几次试试)
IE9/Firefox/Safari/Chrome/Opera :test1 -> test2 -> test3 -> test4 -> test5 顺序