js綁定事件和解綁事件

 

 

在js中綁定多個事件用到的是兩個方法:attachEvent和addEventListener,可是這兩個方法又存在差別性

　　attachEvent方法  只支持IE678,不兼容其餘瀏覽器

　　addEventListener方法   兼容火狐谷歌,不兼容IE8及如下

addEventListener方法

div.addEventListener('click',fn);

div.addEventListener('click',fn2);

function fn(){ console.log("春雨綿綿"); }

function fn2(){
                console.log("處處潮溼");
            }

attachEvent方法

div.attachEvent('onclick',fn);
div.attachEvent('onclick',fn2);
function fn(){ console.log("春雨綿綿"); }
function fn2(){
                console.log("處處潮溼");
            }

注意點:attachEvent方法綁定的事件是帶on的,addEventListener綁定的事件是不帶on的

下面我寫了一個兼容了IE和火狐谷歌的方法

var div=document.getElementsByTagName("div")[0];
            addEvent('click',div,fn)
            function addEvent(str,ele,fn){
                ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
            }
            function fn(){
                console.log("春雨綿綿");
            }

這樣就完美的解決了兼容性的問題

 

有綁定事件的話,那就確定有解綁事件,可是解綁事件和綁定事件同樣,萬惡的IE仍是會搞特殊化

　　detachEvent方法  只支持IE678,不兼容其餘瀏覽器

　　removeEventListener方法   兼容火狐谷歌,不兼容IE8及如下

detachEvent方法寫法:

ele.detachEvent("onclick",fn);

removeEventListener的寫法:

ele.removeEventListener("click",fn);

下面我寫了一個兼容性的方法給你們參考,實現也是很簡單

1 2 3

function  remove(str,ele,fn){                  ele.detachEvent?ele.detachEvent( "on" +str,fn):ele.removeEventListener(str,fn);              }

　　注意點:無論是綁定事件attachEvent仍是刪除事件detachEvent都是要加on的,removeEventListenser和addEventListenser則不須要加on