常见的js兼容

1. 通过注释语句

<!--[if lt IE 9]> 
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
    // 兼容ie9以下
  </script> 
<![endif]-->

<!--[if lte IE 9]> 
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
    // 兼容ie9及其以下
  </script> 
<![endif]-->

---

2. 获取元素样式

/**
 * @param { ele } 要获取样式的元素
 */
function getStyle(ele){
  // IE || 非IE
  return ele.currentStyle || getComputedStyle(ele);
}

var oWrap = document.getElementById("wrap");
var style = getStyle(oWrap);
console.log(style.width);

---

3. requestAnimationFrame

浏览器专门为动画提供的API，在运行时浏览器会自动执行方法的调用，并且如果页面不是激活状态下的话,
动画会自动暂停,有效节省CPU开销，会以浏览器的最低刷新频率来调用函数

cancelAnimationFrame()  取消定时器

// 兼容写法
window.requestAnimationFrame = window.requestAnimationFrame || function(fn){
  return setTimeout(fn, 1000/60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;

---

4. getElementsByClassName

不兼容IE8及以下
方法：
  1、通过特定标签查找
  2、遍历所有的标签查找

/**
 * 通过特定标签查找
 * @param { tagName } 要查找的元素，如：div
 * @param { className } 要查找的类名
 * @param { return } 所有包含该类名元素的数组
 */
function getClassName(tagName, className) {
  // 判断IE浏览器
  if (document.getElementsByClassName) {
    // 能使用
    return document.getElementsByClassName(className);
  } else {
    // 不能使用内置方法的IE低版本浏览器
    var arrEle = []; // 放符合条件的元素

    // 查询当前在文档的标签
    var arrNodes = document.getElementsByTagName(tagName);
    // toggle不支持IE8及以下
    for (var i = 0, len1 = arrNodes.length; i < len1; i++) {
      var nowClassName = arrNodes[i].className.split(/\s+/);
      for (var j = 0, len2 = nowClassName.length; j < len2; j++) {
        if (nowClassName[j] == className) {
          arrEle.push(arrNodes[i]); // 把查到的类名和需要类名比较，符合条件就放到数组中
          break;
        }
      }
    }
    return arrEle; // 返回数组
  }
}

var aLi = getClassName("div", "list-item");
console.log(aLi[0].innerHTML);

/**
 * 遍历所有的标签查找
 * @param { eleClassName } 要查找的类名
 * @param { return } 所有包含该类名元素的数组
 */
if (!document.getElementsByClassName) {
  // 将 undefined时取反，能进来这里一定是IE低版本
  document.getElementsByClassName = function (eleClassName) {
    var aEle = document.getElementsByTagName("*"), // 通配符，获得所有的标签
      reg = new RegExp("\\b" + eleClassName + "\\b"),
      arrEle = [];
    for (var i = 0, len = aEle.length; i < len; i++) {
      if (reg.test(aEle[i].className)) {
        arrEle.push(aEle[i]); // 为true表示，当前元素符合条件，放入数组
      }
    }
    return arrEle;
  };
}

var aLi = document.getElementsByClassName("list-item");

---

5. scrollTop和 scrollLeft

// 主流浏览器 || IE
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

---

6. pageX和 pageY、event事件对象

/*
  event.pageX / event.pageY 相对于文档顶部和左边,不兼容IE8及以下
  event.clientX / event.clientY 相对于可视区域，无兼容性问题
*/
document.onclick = function (e) {
  // e事件对象，事件函数的第一个形参，这里面存储触发当前这一次事件的鼠标事件信息
  e = e || window.event; // 兼容IE的写法
  if (!e.pageY) {
    // IE8及以下
    // 点击时，鼠标位置离可视区域的距离 + 被滚动遮住的那一部分距离
    console.log(e.clientY + document.documentElement.scrollTop);
  } else {
    // 主流浏览器
    console.log(e.pageY);
  }
};

---

7. 阻止事件冒泡

document.onclick = function(e){
  e = e || window.event;
  // 主流 | IE8 及以下
  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};

---

8. 阻止默认行为

document.onclick = function(e){
  e = e || window.event;
  // 主流 | 低版本 IE
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
};

---

9. 事件监听

/**
 * 添加事件
 * @param { ele } 要绑定的element
 * @param { type } 触发的事件类型，如：'click'
 * @param { callback } 回调函数
 * @param { bool } 指定事件是否在捕获或冒泡阶段执行 false(默认)：冒泡   true：捕获
 */
function on(ele, type, callback, bool){
  // 主流 | IE8 及以下
  ele.addEventListener 
    ? ele.addEventListener(type, callback, !!bool)
    : ele.attachEvent("on"+type, callback);       
}

// 移除事件
function off(ele, type, callback,bool){
  // 主流 | IE8 及以下
  ele.removeEventListener
    ? ele.removeEventListener(type, callback, !!bool)
    : ele.detachEvent("on"+type, callback);
}

---

10. event.target

e = e || window.event;
// 主流 | IE
e.target = e.target || e.srcElement; // 得到当前触发事件的是哪个元素

---

11. 滚动事件

/**
 *  谷歌 ie
      滚轮事件 mousewheel
      方向取值 event.wheelDelta 上滚120 下滚-120

    火狐独有
      滚轮事件 DOMMouseScroll 只允许DOM2级事件绑定
      方向取值 event.detail 上滚-3 下滚3
      
 *  @param { obj } 需要绑定的事件对象
 *  @param { eFn ) 需要执行的函数
 */
function mouseWheel(obj, eFn) {
  function fn(e) {
    e = e || window.event;
    // 让滚动方向和值统一
    var direction = e.wheelDelta / 120 || -e.detail / 3;
    if (eFn.call(obj, e, direction) === false) { // 阻止默认行为
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
  }
  // 判断是否是火狐浏览器
  var type = document.onmousewheel === null ? "mousewheel" : "DOMMouseScroll";
  // 判断是否是IE8
  window.addEventListener ? obj.addEventListener(type, fn) :
    obj.attachEvent("on" + type, fn);
}

---

12. rem

(function (win, doc) {
  // 获取HTML标签 
  var docEl = doc.documentElement || document.body;
  // 判断是移动端设备还是PC,移动就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变事件 
  var resize = 'orientationchange' in win ? 'orientationcha nge' : 'resize';

  function rem() {
    var w = docEl.clientWidth / 720 > 1 ? 720 : docEl.clientWidth;
    docEl.style.fontSize = 100 * (w / 720) + 'px';
  }
  // 监听'DOMContent事件: DOM加载完成执行,如果DOMContent事件，那么执行rem函数
  doc.addEventListener('DOMContentLoaded', rem, false);
  // win下监听resize事件,如果resize事件，那么执行rem函数
  win.addEventListener(resize, rem, false);
})(window, document);