js 跨瀏覽器實現事件

標籤：list   null   處理常式   添加   att   dha   ons   div   lis   

我們知道不同的瀏覽器實現事件是不同的，就比如說我們常見的有三種方法：

1，dom0處理事件的方法，以前的js處理事件都是這樣寫的。

  (function () {       var p=document.getElementById("huchao1");       //dom0處理方法     p.onclick=function (a) {      console.log(a.type);      // body...  }  //移除方法如下：   p.onclick=null;      // body...  })() 

2，dom2 處理時間的方法 如下：可以同時添加兩個相同的事件類型，移除這個時間的時候，函數必須不是匿名函數，否則不起作用

 (function () {     var  a=document.getElementById("huchao1");     a.addEventListener("click",function () {         console.log(this.id);         // body...         // false 表示在冒泡階段     },false);     a.addEventListener("click",function () {         console.log("alll");         // body...     },false);     //這樣移除不起作用，函數必須不是匿名函數     a.removeEventListener("click",function () {         // body...     },false);     // body... })()

 

3，ie處理事件，刪除事件detachEvent 注意此處是onclick ,不是click

       (function () {           var btn=document.getElementById("huchao1");           btn.attachEvent("onclick",function () {           alert("dd");               // body...           })           // body...       })()

如何寫一個跨瀏覽器的事件處理常式呢：綜上所述如下：

   (function () {       var EventUtil={           addHandler:function (element,type,Handler) {               //此處dom2事件               if (element.addEventListener) {                   //false表示冒泡階段                   element.addEventListener(type,Handler,false);               }else if(element.attachEvent){                   //ie處理事件                   element.attachEvent("on"+type,Handler);               }else{                   //dom0處理事件                   element["on"+type]=Handler;               }               // body...           },           removeHandler:function (element,type,Handler) {               // body...               if (element.addEventListener) {                   element.removeEventListener(type,Handler,false);               }else if(element.attachEvent){                   element.removeEvent("on"+type,Handler);               }else{                   element["on"+type]=null;               }           }       }       var  btn=document.getElementById("huchao1");   var handler=function () {       alert("huchao");       // body...   }   EventUtil.addHandler(btn,"click",handler);    EventUtil.removeHandler(btn,"click",handler);       // body...   })()

 

  (function () {  var p=document.getElementById("huchao1");  //dom0處理方法     p.onclick=function (a) {  console.log(a.type);  // body...  }  //移除方法如下：   p.onclick=null;
  // body...  })() 

js 跨瀏覽器實現事件