首页 > 代码库 > 原生javascript兼容性问题

原生javascript兼容性问题

2024-07-09 22:26:45   223人阅读

1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;

实例：封装函数 

复制代码代码如下:

function getStyle(obj,name){ 
if(obj.currentStyle){ 
return obj.currentStyle[name]; 
} 
else{ 
return getComputedStyle(obj,false)[name]; 
} 
} 


调用：getStyle(‘color‘); 

2.获取滚动的距离 
document.body.scrollTop 适用于 标准浏览器 
document.documentElement.scrollTop 适用于IE9以下版本 
兼容性可以这样写 
var top = document.body.scrollTop | document.documentElement.scrollTop; 

3.事件对象 
标准浏览器：事件对象作为事件函数的参数 
IE低版本 需要直接用event对象（全局） 

复制代码代码如下:

function （ev）{ 
var event = ev || event; 
} 


现在event就作为了事件对象

4.绑定事件 IE 的绑定事件为 attachEvent/detachEvent(绑定或取消);标准浏览器 addEventListener/removeEventListener（绑定或取消） 
以下是事件绑定或取消的参数，在事件绑定中 函数不能是匿名函数 否则取消不掉 
addEventListener的使用方式： 

target.addEventListener(type, listener, useCapture); 

target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 

IE中： 

target.attachEvent(type, listener); 
target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 

事件绑定的封装函数： 

复制代码代码如下:

function addEvent(obj,ev,fn){ 
if(obj.attachEvent){ 
obj.attachEvent(‘on‘+ev,fn) 
} 
else{ 
obj.addEventListener(ev, fn, false); 

} 
} 


这样的封装函数如果绑定事件fn函数里面用到this 需提防 this 为window(只有IE低版本有这个bug) 不是obj; 

复制代码代码如下:

addEvent(document,‘click‘,function(ev){ 

var ev=ev||window.event; 
var target = ev.target||ev.srcElement; // 获得事件源 主要处理IE低版本this为window之bug 
alert(target) 
}); 


绑定之取消事件 fn为函数名字 

复制代码代码如下:

function removeEvent(obj,ev,fn){ 
if(obj.detachEvent){ 
obj.detachEvent(‘on‘+ev,fn) 
} 
else{ 
obj.removeEventListener(ev, fn, false); 

} 
} 


5.ajax 
Ajax创建XMLHttp对象 标准版浏览器与IE低版本不兼容 
标准版创建XMLHttp对象： 

复制代码代码如下:

//1.创建对象 
if(window.XMLHttpRequest) 
{ 
var oAjax=new XMLHttpRequest();//标准浏览器 
} 
else 
{ 
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE低版本 
} 
alert(oAjax); 


6.取消默认事件 
js中默认事件取消是主要是两种 return false 和 preventDefault 
取消默认事件中return false 是兼容任何浏览器 但是如果遇到事件绑定的 addEventListener 会取消不掉默认事件 
取消默认右键事件例子： 

复制代码代码如下:

document.addEventListener(‘contextmenu‘,function(ev){ 
ev.preventDefault(); 
})) 
document.oncontextmenu = function(){ 
return false; 
} 


7.call与apply 的区别 
call、apply 可以调用函数 
例如 

复制代码代码如下:

function show(){ 
alert(this) 
} 
//show(); 弹出window 
//show.call();弹出windwo 
//show.call(this) //弹出window 
//show.call(5); //弹出5; 
show.call(this,5); //弹出window 


call(this,arg1,arg2,...)可以看出call里面的参数 this主要是指代事件对象 以后参数是函数中用到的参数 
用call与apply来主要是修改this的，功能上和普通的函数没有什么太大的区别 
apply(this,arguments) 主要是对参数不确定来使用 
8、DOM取得子节点children和childNodes 
children 取得 子节点 只能是取第一层 必须是标签节点 
例如： 

复制代码代码如下:

<span><a href="http://www.mamicode.com/#">文字1</a></span> 
<span><a href="http://www.mamicode.com/#">文字2</a></span> 


children[0] 这样只能是取到第一个span 要是想取到第一个a标签 children[0].children[0],所以说children的长度只是2； 
childNodes在高版本上会算上空文本 在火狐 谷歌上 上面的是长度是5;在IE低版本（6-8）长度是4.


联系
我们