JavaScript原生兼容大全-持续更新

2023-06-20,,

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 写在函数最后 也可以阻止默认事件 没有兼容问题
}

JavaScript原生兼容大全-持续更新的相关教程结束。

《JavaScript原生兼容大全-持续更新.doc》

下载本文的Word格式文档,以方便收藏与打印。