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

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