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

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));
    }复制代码


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值