JS中的常见的兼容性处理

1、获取 event 和 target 对象

var e = event || window.event;
var target = e.target || e.srcElement;

2、绑定和移除事件

function addEvent(ele, ev, fn) {
  if (ele.addEventListener) {
      ele.addEventListener(ev, fn);
  } else if (ele.attachEvent) {
      ele.attachEvent("on" + ev, fn);
  } else {
      ele["on" + ev] = fn;
  }
}

function removeEvent(ele, ev, fn) {
  // 注意，移除事件时，fn必须是声明函数：function fn() {}，而不能是匿名函数，否则无效
  if (ele.removeEventListener) {
      ele.removeEventListener(ev, fn);
  } else if (ele.detachEvent) {
      ele.detachEvent("on" + ev, fn);
  } else {
      ele["on" + ev] = null;
  }
}

3、添加自定义事件和传参
还有一个与之一致的用法 new Event(type, options)，但此种方式不支持传参（点击查看详情），所以推荐使用以下方式：

function customEvent(eventName, obj) {
  // 构造事件对象
  var myEvent = new CustomEvent(eventName, {
      detail: obj  // detail是固定写法，obj为自定义要传的参数
  });

  // 触发事件对象
  if (window.dispatchEvent) {
      window.dispatchEvent(myEvent); // 高级浏览器
  } else {
      window.fireEvent(myEvent); // IE浏览器
  }
}

4、阻止事件冒泡

function clearEventBubble() {
  var e = event || window.event;
  // e.stopPropagation(); 标准浏览器
  // e.cancelBubble = true; IE浏览器
  e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
}

5、阻止事件默认行为

function stopDefault() {
  var e = event || window.event;
  // e.preventDefault(); 标准浏览器
  // e.returnValue = false; IE浏览器
  e.preventDefault && e.preventDefault() || (e.returnValue = false); // IE浏览器
}

6、获取浏览器文档宽高（区别于可视区域）
浏览器整个文档内容的宽/高度，包括滚动条卷去部分+可视部分+底部隐藏部分的宽/高度总和。

function getDocumentSize() {
  var w, h;
  if (document.compatMode === "BackCompat") {
    w = document.body.scrollWidth;
    h = document.body.scrollHeight;
  } else {
    w = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
    h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
  }
  return {
    width: w,
    height: h
  }
}

7、获取浏览器可视区域宽高

function getClientSize() {
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  }
}

8、获取元素对象宽高

function getEleSize(ele) {
  return {
    width: ele.clientWidth || parseInt(getComputedStyle(ele)['width']),
    height: ele.clientHeight || parseInt(getComputedStyle(ele)['height'])
  }
}

9、获取页面滚动条距离

function getScrollDistance() {
  return {
    top: document.documentElement.scrollTop || document.body.scrollTop,
    left: document.docimentElement.scrollLeft || document.body.scrollLeft
  }
}

10、删除元素节点

function removeNode(ele) {
  if (!isIE()) {
    ele && ele.remove();
  } else {
    ele && ele.parentNode.removeChild(ele);
  }
}

function isIE() {
  return ((window.ActiveXObject || "ActiveXObject" in window) || (/Trident\/7\./).test(navigator.userAgent)) && true || false;
}