事件中兼容还是挺多的,这里稍微总结下,大家还得多看多背才能熟记
1.获取行内样式兼容
function getStyle(ele,attr){
if(window.getComputedStyle){
//通常方法获取
return window.getComputedStyle(ele,false)[attr];
}else{
//ie兼容
return ele.currentStyle[attr];
}
}
2.键盘事件keycode兼容
keycode 不区分大小写, 返回大写的英文字母的ASCII编码
ie写法:e.which
var keyCode = e.keyCode || e.which;
3.阻止浏览器默认行为
var preventDefault = function(){
if(event.preventDefault){
event.preventDefault();
//ie写法
}else{
event.returnValue = false;
}
}
或return false/0
---jquery 中return false 不仅会阻止浏览器默认行为,还会阻止冒泡
--- 如果函数以后想反回布尔类型的值, 用0和1代替
4.事件委托和event兼容
var getEvent = function(event){
event = event || window.event;
事件委托:(event.srcElement:ie写法)
return event.target || event.srcElement;
}
5.阻止事件冒泡兼容
btn.onclick = function (ev) {
ev = ev || window.event;
//通常写法
if(ev.stopPropagation) {
ev.stopPropagation();
} else {
//ie写法
ev.cancelBubble = true;
}
}
6.事件绑定监听事件兼容
var handle = {
//调用使用事件绑定
addHandle: function(ele, type, event) {
//浏览器当有addEventListener事件,执行,否则执行下面
if(ele.addEventListener) {
ele.addEventListener(type, event, false);
//浏览器当有attachEvent事件,执行,否则执行下面
} else if(ele.attachEvent) {
//ie要注意事件类型要 加on
ele.attachEvent('on' + type, event);
} else {
ele['on' +type] = event;
}
},
//移除监听
removeHandle: function(ele, type, event) {
//浏览器当有removeEventListener事件,执行,否则执行下面
if(ele.removeEventListener) {
ele.removeEventListener(type, event, false);
//浏览器当有detachEven事件,执行,否则执行下面
} else if(ele.detachEvent) {
ele.detachEvent('on' + type, event);
} else {
ele['on' +type] = null;
}
}
}