建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

解析Javascript事件模块的演变(2)

时间:2011-04-09 13:47来源: 作者: 点击:
在上篇上一篇解析Javascript事件模块的演变(1)中我们封装了一个addEvent,本文我们将继续讲解。 1,解决了IE6/7/8下事件handler中this为window的错误。 2,并且统一了事件对象作为事件handler的第一个参数传入。 这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实

在上篇上一篇解析Javascript事件模块的演变(1)中我们封装了一个addEvent,本文我们将继续讲解。

1,解决了IE6/7/8下事件handler中this为window的错误。

2,并且统一了事件对象作为事件handler的第一个参数传入。

这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了,IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上,add,remove分别添加和删除事件。

01 E = { 

02     //添加事件 

03     add : function(el, type, fn){ 

04         if(el.addEventListener){ 

05             el.addEventListener(type, fn, false); 

06         }else{ 

07             el['e'+fn] = function(){ 

08                 fn.call(el,evt); 

09             };   

10             el.attachEvent('on' + type, el['e'+fn]); 

11         } 

12     }, 

13     //删除事件 

14     remove : function(el, type, fn){ 

15         if(el.removeEventListener){ 

16             el.removeEventListener(type, fn, false); 

17         }else if(el.detachEvent){ 

18             el.detachEvent('on' + type, el['e'+fn]); 

19         } 

20     }    

21 };

可以看到,标准浏览器如IE9/Firefox/Safari/Chrome/Opera会使用addEventListener/removeEventListener添加/删除事件,IE6/7/8则使用attachEvent/detachEvent。标准浏览器中事件handler是传入的第三个参数fn,IE6/7/8中则是包装后的el["e"+fn]。

 

好了,已经拥有了添加,删除事件两个方法,并且解决了各浏览器下中的部分差异,现再添加一个主动触发事件的方法dispatch。该方法能模拟用户行为,如点击(click)操作等。 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法。因为可能会出现异常,使用了try catch。

01 E = { 

02     //添加事件 

03     add : function(el, type, fn){ 

04         if(el.addEventListener){ 

05             el.addEventListener(type, fn, false); 

06         }else{ 

07             el['e'+fn] = function(){ 

08                 fn.call(el,window.event); 

09             };   

10             el.attachEvent('on' + type, el['e'+fn]); 

11         } 

12     }, 

13     //删除事件 

14     remove : function(el, type, fn){ 

15         if(el.removeEventListener){ 

16             el.removeEventListener(type, fn, false); 

17         }else if(el.detachEvent){ 

18             el.detachEvent('on' + type, el['e'+fn]); 

19         } 

20     }, 

21     //主动触发事件 

22     dispatch : function(el ,type){ 

23         try{ 

24             if(el.dispatchEvent){ 

25                 var evt = document.createEvent('Event'); 

26                 evt.initEvent(type,true,true); 

27                 el.dispatchEvent(evt); 

28             }else if(el.fireEvent){ 

29                 el.fireEvent('on'+type); 

30             } 

31         }catch(e){}; 

32     } 

33 };

这就是整个事件模块的雏形,往后还有很多需要补充完善的地方。但对于普通的应用,这几个函数足以胜任。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片