javascript 兼容W3c和IE的添加（取消）事件监听方法

Posted 2020-06-18 Edison的备忘录

事件作为javascript本身的一个必备功能，在目前javascript的使用中是无处不在的，基本要只要写到javascrpt，就会用到javascript事件。下面就说说javascript中的添加事件监听和取消事件监听的方法，当然也要做到兼容W3c和IE。下面是兼容的代码：

 

[javascript] view plain copy

 

 

1. //添加事件监听兼容函数  
2. function addHandler(target, eventType, handler){  
3.     if(target.addEventListener){//主流浏览器  
4.         addHandler = function(target, eventType, handler){  
5.             target.addEventListener(eventType, handler, false);  
6.         };  
7.     }else{//IE  
8.         addHandler = function(target, eventType, handler){  
9.             target.attachEvent("on"+eventType, handler);  
10.         };        
11.     }  
12.     //执行新的函数  
13.     addHandler(target, eventType, handler);  
14. }  
15. //删除事件监听兼容函数  
16. function removeHandler(target, eventType, handler){  
17.     if(target.removeEventListener){//主流浏览器  
18.         removeHandler = function(target, eventType, handler){  
19.             target.removeEventListener(eventType, handler, false);  
20.         }         
21.     }else{//IE  
22.         removeHandler = function(target, eventType, handler){  
23.             target.detachEvent("on"+eventType, handler);  
24.         }         
25.     }  
26.     //执行新的函数  
27.     removeHandler(target, eventType, handler);  
28. }  

上面这段代码是对监听事件函数做了优化的，延迟加载事件监听函数，这样就不用每次都对添加或删除事件进行判断了，只在第一次添加或删除监听事件的时候进行判断，会大大提高监听事件的执行效率。