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

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

本文介绍了详解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 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 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
 }
 });
 },

 // 取消默认行为
 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 出现的兼容问题

事件绑定:(不兼容需要两个结合做兼容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、节点加载

//火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同
//感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js兼容性写法 js 兼容写法 js event兼容写法