js元素事件绑定与解绑

Posted 2020-12-02 夏日凉白开

为元素绑定事件有3种方式：

1、最常见的绑定方式：

document.getElementById("btn").onclick=function(){};

2、非IE浏览器     element.addEventListener(type,fn,false)

（布尔值====true表示捕获，false表示冒泡，一般用false）：

document.getElementById("btn").addEventListener("click",function(){};false);

3、IE浏览器下的事件绑定        element.attachEvent("on"+type,fn)

document.getElementById("btn").attachEvent("onclick",function(){});

 

==================为元素（element）绑定事件的兼容代码：=======================

 

 1     function addEventListener(element,type,fn){
 2                 if(element.addEventListener){
 3                     element.addEventListener(type,fn,false);
 4                 }else if(element.attachEvent){
 5                     element.attachEvent("on"+type,fn);
 6                 }else{
 7                     element["on"+type]=fn;
 8                 }
 9                 
10             }

 

为元素解除绑定有3种方式：

1、普通方式：

document.getElementById("btn").onclick=null;

2、非IE浏览器  element.removeEventListener(type,fName,false)

（布尔值====true表示捕获，false表示冒泡，一般用false）：

document.getElementById("btn").removeEventListener("click",fName,false); 

3、IE浏览器    element.detachEvent("on"+type,fName)

document.getElementById("btn").detachEvent("onclick",fName);

 

==================为元素（element）解绑事件的兼容代码：=======================

 1     function removeEventListener(element,type,fName){
 2                 if(element.removeEventListener){
 3                     element.removeEventListener(type,fName,false);
 4                 }else if(element.detachEvent){
 5                     element.detachEvent("on"+type,fName);
 6                 }else{
 7                     element["on"+type]=null;
 8                 }
 9             }