兼容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)
  • 【兼容ie8低版本浏览器不支持addEventListener】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)); } }

    推荐阅读