欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

EventUtil对象 之 跨浏览器的事件处理程序

程序员文章站 2022-04-19 20:32:50
跨浏览器事件处理程序 最近在读javascript高级程序设计,读第十三章的时候有感。 开发中经常考虑的事情就是兼容性,样式兼容,脚本兼容等~~ 经常考虑的对象常为: DOM 与 IE (这里的dom对象我理解为ie9,Firefox,chrome,safari,opera以上。IE则为ie8及以下 ......

 跨浏览器事件处理程序 

 最近在读javascript高级程序设计,读第十三章的时候有感。

  开发中经常考虑的事情就是兼容性,样式兼容,脚本兼容等~~

  经常考虑的对象常为:  DOM    IE     (这里的dom对象我理解为ie9,Firefox,chrome,safari,opera以上。IE则为ie8及以下)

  首先介绍  事件流:描述的是从页面接收事件的顺序。分为事件冒泡与事件捕获。(ie9,Firefox,chrome,safari,opera支持DOM事件流。ie8及更早版本不支持DOM事件流).

  事件处理程序:

   1.html事件处理程序(即在html元素上执行事件,缺点是时差问题。比如点击事件,当事件处理程序不具备执行条件时,指页面刚渲染元素,用户就点击元素,可能会报错)

   2. 

     2.1

 

     2.1.1   DOM0级事件处理

       var   btn = document.getElementById("mybtn");

       btn.onclick = function(){  

         alert(this.id);   //"mybtn"   this可以访问元素的任何属性和方法

          };

       btn.onclick = null;  //删除事件处理程序

     2.1.2   DOM2级事件处理程序   

      var btn = document.getElementById("mybtn");
      //添加事件程序
      btn.addEventListener("click",function(){alert(this.id)},falsle);

     //移除事件程序 注意:移除时候的第二个参数如果为匿名函数,则会无效
      var handler = function(){alert(this.id)};
          
      btn.addEventListener("click",handler,falsle);
 
      btn.removeEventListener("click",handler,falsle);
 

      DOM0级事件处理程序的缺点:前面添加的事件处理程序会被后面添加的覆盖

      DOM2级事件处理程序的优点:可以添加多个事件处理程序,会一一执行

 

     2.2 IE事件处理程序

     支持IE事件程序的只有ie和opera

    var myDiv = document.getElementById("mydiv");

    //添加事件程序 注意attachEvent()只有两个参数,第一个事件参数需要加 on

    btn.attachEvent("onclick",function(){
      alert(this.id); //mydiv
      alert(this === window); //true 牢记这一点 ,在跨浏览器代码时,这点很重要
    });
    //attachEvent()也可以绑定对个事件程序

 

    //移除事件程序 detachEvent(), 和dom一样  第二个参数不可为匿名函数  
              
    var handler = function(){alert(this.id)};
          
    btn.attachEvent("onclick",handler,falsle);

    btn.detachEvent("onclick",handler,falsle);

    重点:跨浏览器事件处理程序
    对象:EventUtil
    方法:addHandler()、removeHandler() 职责为视情况来使用dom或者ie事件处理程序
      方法的参数:要操作的元素,事件名称,事件处理程序
    写法:
        
    var myDiv = document.getElementById("mydiv");
    var handler = function(){alert("clicked")};
    var EventUtil = {
    addHandler:function(element,type,handler){
   if(element.addEventListener){
    //ie9,opera,firefox。。及以上高浏览器的dom2级事件处理程序
    element.addEventListener(type,handler,false);
    }else{
    //i8,opera及以下低版本的dom2级事件处理程序
    element.attachEvent("on"+type,handler)
    };
    },
    removeHandler:function(element,type,handler){
   if(element.removeEventListener){
   element.removeEventListener(type,handler,false);
   }else{
    element.detachEvent("on"+type,handler)
     };
    };
    };
   //使用
   //绑定事件处理程序
  EventUtil.addHandler(myDiv,"click",handler);
   //移除事件处理程序
   EventUtil.removeHandler(myDiv,"click",handler);


  总结:在需要考虑跨浏览器的事件处理程序的时候,只需添加上面介绍的EventUtil对象封装好的逻辑,及正确的引用
,就会对应不同的浏览器使用不同事件处理程序方法达到兼容性。

   哇的一声就哭出来,第一次写博客,不知道用什么方法添加代码才能达到规范的格式(所有的代码复制过来的时候都是小字体,靠右对齐的,所以得手动调试
,以及干脆再敲一遍),不过呢,感觉还是挺开心的!有什么不对的地方希望大家能指出,我一定会学习及修改!

   学习是一种态度!-.-