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

2018-06-24 01:45:54来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 跨浏览器事件处理程序 

 最近在读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对象封装好的逻辑,及正确的引用
,就会对应不同的浏览器使用不同事件处理程序方法达到兼容性

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

   学习是一种态度!-.-

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:第1章 JavaScript简史

下一篇:TypeScript 基本语法