详解js几个绕不开的事件兼容写法

本文介绍了详解js几个绕不开的事件兼容写法，分享给大家，具体如下：

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、求窗口大小的兼容写法

当我们获取滚动条滚动距离时:

IE,Chrome: document.body.scrollTop

FF: document.documentElement.scrollTop

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）// 1600 * 525var client_w = document.documentElement.clientWidth || document.body.clientWidth;var client_h = document.documentElement.clientHeight || document.body.clientHeight;// 网页内容实际宽高（包括工具栏和滚动条等边线）// 1600 * 8var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;// 网页内容实际宽高 (不包括工具栏和滚动条等边线）// 1600 * 8var 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      }    });  },  // 取消默认行为  preventDefault: function(event) {    if (event.preventDefault) {      event.preventDefault();    } else {      event.returnValue = false;    }  },  // 阻止事件冒泡  stopPropagation: function(event) {    if (event.stopPropagation) {      event.stopPropagation();    } else {      event.cancelBubble = true;    }  }};