JavaScript兼容-持续更新
1.css非行内样式操作
// currentStyle用于IE低版本 getComputed用于主流浏览器
// element 目标元素 attribute 目标属性
function getStyle(element, attribute) {
return element.currentStyle ? element.currentStyle(attribute) : getComputed(element)[attribute];
}
2.事件添加删除
// attachEvent/detachEvent用于IE低版本 addEventListener/removeEventListener用于主流浏览器
// element 事件源(目标元素) eventType 事件类型 callback 事件行为
// 添加
function addEvent(element, eventType, callback) {
// element.attachEvent ? element.attachEvent(`on${eventType}`, callback) : element.addEventListener(eventType, callback);
if (ele.attachEvent) {
ele.attachEvent('on' + type, callback);
} else {
ele.addEventListener(type, callback);
}
}
//删除
function removeEvent(element, eventType, callback) {
// element.detachEvent ? element.detachEvent(`on${eventType}`, callback) : element.removeEventListener(eventType, callback);
if (ele.attachEvent) {
ele.detachEvent('on' + type, callback);
} else {
ele.removeEventListener(type, callback);
}
}
3.事件对象
// window.event用于IE低版本 event用于主流浏览器
element.onEventType = function(event) {
var e = event || window.event;
}
4.阻止冒泡
// cancelBubble = true用于IE低版本 stopPropagetion用于主流浏览器
element.onEventType = function(event) {
var e = event || window.event;
// e.stopPropagetion ? e.stopPropagetion() : e.cancelBubble = true;
if (e.stopPropagetion) {
e.stopPropagetion();
} else {
e.cancelBubble = true;
}
}
5.键盘keyCode
// which用于IE低版本 keyCode用于主流浏览器
element.onEventType = function(event) {
var e = event || window.event;
var code = e.keyCode || e.which;
}
6.取消默认行为
// returnValue用于IE低版本 preventDefault用于主流浏览器
element.onEventType = function(event) {
var e = event || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue;
}
// return false 写在函数最后 也可以阻止默认事件 没有兼容问题
}
标签:function,eventType,JavaScript,attachEvent,element,callback,兼容,event,大全
From: https://www.cnblogs.com/SpicyPeper/p/17381111.html