js 跨浏览器实现事件

Posted 2020-09-20 Simple Programmer

我们知道不同的浏览器实现事件是不同的，就比如说我们常见的有三种方法：

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...  })()