位置:海鸟网 > IT > JavaScript >

IE6/7/8下同类型事件的多个handler无序执行

大家应该注意的问题,在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 顺序