兼容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));
    }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,022评论 1 10
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,159评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,025评论 0 6
  • 闲来无事,又看了一遍赵薇导的致青春,这个电影我看了三遍,每一次都有不同的感悟,每一次也都有不同的疑惑! 第一次看,...
    皖快阅读 475评论 0 0