這篇文章主要介紹了純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. }