纯JavaScript实现的兼容各浏览器的添加和移除事件封装

这篇文章主要介绍了纯JavaScript实现的兼容各浏览器的添加和移除事件封装,本文直接给出实现代码,代码中带详细注释,需要的朋友可以参考下

 

1. //事件处理兼容各种浏览器，采用能力检测方法，所谓能力检测，就是有能力就做，没有能力就不做 
2.  
3. //定义一个处理事件的对象，兼容各种浏览器，dom2级事件处理和ie事件，如果这两个事件都不兼容，就采用dom0级处理 
4. var eventUtil ={ 
5. addEvent:function(element,type,handler){ 
6. if (element.addEventListener) { 
7. //非IE浏览器采用dom2级事件处理，type为事件类型如：click，handler为事件处理函数，false代表事件采用冒泡处理模型，如果是true代表 采用捕获型处理模型 
8. //除了netbeans采用捕获型处理模型，其他都采用冒泡型处理模型 
9. //如果是非IE浏览器添加事件为：addEventListener 
10. element.addEventListener(type,handler,false); 
11. }else if (element.attachEvent) { 
12. //如果为IE浏览器，添加事件采用 attachEvent 
13. element.attachEvent('on'+type,handler); 
14. }else{ 
15. element['on'+type] = handler; 
16. } 
17. }, 
18. removeEvent:function(element,type,handler){ 
19. if (element.removeEventListener) { 
20. //非IE浏览器采用dom2级事件处理，type为事件类型如：click，handler为事件处理函数，false代表事件采用冒泡处理模型，如果是true代表 采用捕获型处理模型 
21. //除了netbeans采用捕获型处理模型，其他都采用冒泡型处理模型 
22. //如果是非IE浏览器添加事件为：removeEventListener 
23. element.removeEventListener(type,handler,false); 
24. }else if (element.detachEvent) { 
25. //如果为IE浏览器，添加事件采用 detachEvent 
26. element.detachEvent('on'+type,handler); 
27. }else{ 
28. //dom0级事件处理，如果删除事件采用赋值null 
29. element['on'+type] = null; 
30. } 
31. }, 
32. getEvent:function(event){ 
33. //获取事件本身 
34. return event?event:window.event; 
35. }, 
36. getType:function(event){ 
37. //获取事件类型 
38. return event.type; 
39. }, 
40. getElement:function(event){ 
41. //获取事件作用元素 
42. return event.target || event.srcElement; 
43. }, 
44. preventDefault:function(event){ 
45. //阻止默认的事件行为 
46. if(event.preventDefault){ 
47. event.preventDefault(); 
48. }else{ 
49. event.returnValue = false; 
50. } 
51. }, 
52. stopProPagation:function(event){ 
53. //停止事件冒泡 
54. if(event.stopProPagation){ 
55. event.stopProPagation(); 
56. }else{ 
57. event.cancelBubble = true; 
58. } 
59. } 
60.  
61.  
62.  
63.  
64. }