1伯诬、鍵盤事件 keyCode 兼容性寫法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}

2、求窗口大小的兼容寫法

當(dāng)我們獲取滾動條滾動距離時:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop

// 瀏覽器窗口可視區(qū)域大械抢健（不包括工具欄和滾動條等邊線）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 網(wǎng)頁內(nèi)容實際寬高（包括工具欄和滾動條等邊線）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 網(wǎng)頁內(nèi)容實際寬高 (不包括工具欄和滾動條等邊線）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滾動的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

3、DOM 事件處理程序的兼容寫法（能力檢測）

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    // 添加事件句柄
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在這里由于.與'on'字符串不能鏈接，只能用 []
            elem['on' + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    // 添加事件代理
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    // 取消默認(rèn)行為
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    // 阻止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

4、解決 IE9 以下瀏覽器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

5劳较、為一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現(xiàn)的兼容問題

事件綁定:(不兼容需要兩個結(jié)合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);

 function myAddEvent(obj,ev,fn){
      if(obj.attachEvent){
        //IE8以下
        obj.attachEvent('on'+ev,fn);
      }else{
        //FF,Chrome,IE9-10
        obj.attachEventLister(ev,fn,false);
      }
    }

6驹止、獲取元素的非行間樣式值

function getStyle(object,oCss) {
       if (object.currentStyle) {
         return object.currentStyle[oCss];//IE
       }else{
         return getComputedStyle(object,null)[oCss];//除了IE
       }
   }

7、節(jié)點加載

//火狐下特有的節(jié)點加載事件观蜗，就是節(jié)點加載完才執(zhí)行臊恋，和onload不同
//感覺用到的不多，直接把js代碼放在頁面結(jié)構(gòu)后面一樣能實現(xiàn)墓捻。抖仅。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加載完成。好像除IE6-8都可以.