美文网首页
兼容ie8低版本浏览器不支持addEventListener

兼容ie8低版本浏览器不支持addEventListener

作者: _信仰zmh | 来源:发表于2018-04-18 13:24 被阅读169次
    if (window.attachEvent) {    
        window.attachEvent("onload", show);    
    } else if (window.addEventListener) {    
        window.addEventListener("load", show, false);      
    }  
    
    现代主流浏览器addEventListener使用:

    添加事件到对象,除IE低版本浏览器之外都支持addEventListener()。

    • 语法

    element.addEventListener(type,listener,useCapture)

    • element:元素,可以是文档节点、document、window 或 XMLHttpRequest。

    • type:事件类型,不含“on”,比如“click”、“mouseover”、“keydown”等。

    • listener:响应函数,即要绑定事件的名称,也就是你写好的函数,不要加括号。

    • useCapture:布尔值,判断捕获还是冒泡,false或true必须填写,true代表支持浏览器事件捕获功能,false代表支持浏览事件冒泡功能,一般用 false 。

    • 执行顺序:先绑定的先执行,那个函数先注册,那个先执行

    三个参数,必须设置,缺一不可。

    • 举个例子:
        var oBtn = document.getElementById("btn");   
        oBtn.addEventListener("click",method1,false);  
        oBtn.addEventListener("click",method2,false);  
        oBtn.addEventListener("click",method3,false);//执行顺序为method1->method2->method3  
    
    ie 的attachEvent

    添加事件到对象,只有IE浏览器支持attachEvent()
    语法

    element.attachEvent(type,listener)

    • element:元素。可以是文档节点、document、window 或 XMLHttpRequest。

    • type:事件类型名称。必须含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
      listener:要绑定事件的名称,也就是你写好的函数,不要加括号。

    • 执行顺序:后绑定的先执行

    • 举个栗子:

        var oBtn2 = document.getElementById("btn2");   
        oBtn2.attachEvent("onclick",method1);  
        oBtn2.attachEvent("onclick",method2);  
        oBtn.attachEvent("onclick",method3);//执行顺序为method3->method2->method1 
    

    原生js的相应

    事件源.事件类型 = 事件的相应程序。
    必须加on,多个事件会产生覆盖,只有最后一个才响应。

        document.getElementById("btn").onclick = method1;  
        document.getElementById("btn").onclick = method2;  
        document.getElementById("btn").onclick = method3;//如果这样写,只有medhot3被执行  
    

    兼容IE8 addEventListener、removeEventListener 函数

    //兼容bind函数
    if(!Function.prototype.bind){
        Function.prototype.bind = function(){
            if(typeof this !== 'function'){
          throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }
            var _this = this;
            var obj = arguments[0];
            var ags = Array.prototype.slice.call(arguments,1);
            return function(){
                _this.apply(obj,ags);
            };
        };
    }
    
    //兼容addEventListener函数
    function addEventListener(ele,event,fn){
        if(ele.addEventListener){
            ele.addEventListener(event,fn,false);
        }else{
            ele.attachEvent('on'+event,fn.bind(ele));
        }
    }
    
    //兼容removeEventListener函数
    function removeEventListener(ele,event,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(event,fn,false);
        }else{
            ele.detachEvent('on'+event,fn.bind(ele));
        }
    }
    

    相关文章

      网友评论

          本文标题:兼容ie8低版本浏览器不支持addEventListener

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