美文网首页
浅谈事件兼容性问题

浅谈事件兼容性问题

作者: 科大问天 | 来源:发表于2017-02-20 21:43 被阅读0次

1、兼容性

(1)语法(syntax): addEventListener(type, handler, useCapture)

type:事件类型

handler:事件处理函数

useCapture:是否在捕获阶段触发

兼容支持:ie9 以上主流浏览器。

(2) 语法(syntax):attachEvent("on" + type, hander )

type:事件类型

handler:事件处理函数

兼容支持:ie6-10。

2、初级封装

function  registerEvent(ele,type,handler){

        if(ele.addEventListener){

              ele.addEventListener(type,handler,false);

        }else if(ele.attachEvent){

              ele.attachEvent("on"+type,handler);

        }else{

              ele["on"+type]=handler;

        }

}

缺点:同一个页面里有多次注册事件,而每次调用都要判断一次浏览器的支持环境,浪费资源!

3、中级封装

function  createRegister(){

      if(window.addEventListener){

             return function(ele,type,handler){

                     ele.addEventListener(type,handler,false);

             }

       }else if(window.attachEvent){

             return function(ele,type,handler){

                    ele.attachEvent("on"+type,handler);

             }

        }else{

               return function(ele,type,handler){

                       ele["on"+type]=handler;

               }

       }

}

优点:调用craeteRegister函数,并不是在注册事件,而是获取一个当前浏览器支持的注册事件的方式    

 var  eventRegister  =  createRegister();

缺点:(1).事件对象的获取,要处理;

           (2). this的指向问题,也要处理。

3、高级封装

function  createRegister(){

         if(window.addEventListener){

                 return function(ele,type,handler){

                       ele.addEventListener(type,handler,false);

                 }

         }else if(window.attachEvent){

                return function(ele,type,handler){

                        ele.attachEvent("on"+type,function(){

//使用一个中间函数,这样子就可以自己控制调用了,call方法将this指向我们需要的ele.

                               handler.call(ele,window.event);

                        });

                }

         }else{

                 return function(ele,type,handler){

                       ele["on"+type]=handler;

                 }

          }

}

优点:(1)、使用我们封装好的eventRegister这个函数的时候,不再需要考虑浏览器的兼容性问题。

(2)、用一种统一的方式,就能够获取到事件对象,以及当前点击的元素对象。

总结:第一次写简书,好不习惯啊,求教怎么在上面写出开发者工具的代码,写的好了啊!奔溃!

谢谢,望大神指教!

相关文章

网友评论

      本文标题:浅谈事件兼容性问题

      本文链接:https://www.haomeiwen.com/subject/enoewttx.html