前端之家收集整理的这篇文章主要介绍了
详解js几个绕不开的事件兼容写法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文介绍了详解js几个绕不开的事件兼容写法，分享给大家，具体如下：
1、键盘事件 keyCode 兼容性写法
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 事件处理程序的兼容写法（能力检测）
添加事件句柄
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,listener) {
if (elem.removeEventListener) {
elem.removeEventListener(type,false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type,listener);
} else {
elem['on' + type] = null;
}
},//
添加事件代理
addAgent: function (elem,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
5、为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
6、获取元素的非行间样式值
7、节点加载
代码放在
页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
