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;
}