兼容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));
}
}
推荐阅读
- 低头思故乡——只是因为睡不着
- 《低风险创业》樊登
- 世界之大,包罗万象--|世界之大,包罗万象-- 读《我不过低配的人生》
- 103
- 日更82/365珍视生命中的每一刻
- 低调做人是一种智慧
- 一味地刷手机让你的效率越来越低下
- 事件解绑与解绑的兼容代码
- 小程序有哪些低成本获客手段——案例解析
- 【迅动股票】强势股开始回调,降低仓位等待回踩