原生javascript兼容性测试实例
2013-07-01 00:00
405 查看
1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;
实例:封装函数
调用:getStyle('color');
2.获取滚动的距离
document.body.scrollTop 适用于 标准浏览器
document.documentElement.scrollTop 适用于IE9以下版本
兼容性可以这样写
var top = document.body.scrollTop | document.documentElement.scrollTop;
3.事件对象
标准浏览器:事件对象作为事件函数的参数
IE低版本 需要直接用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);});
事件绑定的封装函数:
这样的封装函数如果绑定事件fn函数里面用到this 需提防 this 为window(只有IE低版本有这个bug) 不是obj;
绑定之取消事件 fn为函数名字
5.ajax
Ajax创建XMLHttp对象 标准版浏览器与IE低版本不兼容
标准版创建XMLHttp对象:
6.取消默认事件
js中默认事件取消是主要是两种 return false 和 preventDefault
取消默认事件中return false 是兼容任何浏览器 但是如果遇到事件绑定的 addEventListener 会取消不掉默认事件
取消默认右键事件例子:
7.call与apply 的区别
call、apply 可以调用函数
例如
call(this,arg1,arg2,...)可以看出call里面的参数 this主要是指代事件对象 以后参数是函数中用到的参数
用call与apply来主要是修改this的,功能上和普通的函数没有什么太大的区别
apply(this,arguments) 主要是对参数不确定来使用
8、DOM取得子节点children和childNodes
children 取得 子节点 只能是取第一层 必须是标签节点
例如:
children[0] 这样只能是取到第一个span 要是想取到第一个a标签 children[0].children[0],所以说children的长度只是2;
childNodes在高版本上会算上空文本 在火狐 谷歌上 上面的是长度是5;在IE低版本(6-8)长度是4.
实例:封装函数
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="#">文字1</a></span> <span><a href="#">文字2</a></span>
children[0] 这样只能是取到第一个span 要是想取到第一个a标签 children[0].children[0],所以说children的长度只是2;
childNodes在高版本上会算上空文本 在火狐 谷歌上 上面的是长度是5;在IE低版本(6-8)长度是4.
相关文章推荐
- 原生javascript兼容性测试实例
- javascript原生封装一个淡入淡出效果的函数测试实例代码
- JavaScript之事件委托实例(附原生js和jQuery代码)
- JavaScript 实例 | 使用原生 JS 写五子棋
- 原生javascript实现文件异步上传的实例讲解
- javascript 类属性、类方法、类实例、实例属性、实例方法、prototype、__proto__ 测试与小结
- 非常实用的Junit3与Junit4 测试 以及两者平滑过渡(高兼容性)实例代码
- javascript面向对象的测试实例
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- 原生JavaScript代码100个实例
- 原生javascript学习:javascript闭包实例
- javascript测试框架 Mocha 实例教程
- 原生JavaScript中的原型链和继承(代码实例详解)
- 测试IE浏览器对JavaScript的AngularJS的兼容性
- 原生 javascript ajax 实例演示
- 原生javascript兼容性
- JavaScript原生编写《飞机大战坦克》游戏完整实例
- 原生JavaScript中的原型概念(代码实例详解)
- JavaScript特效动画实例—图片轮播 右下角图片广告 原生js日历
- jquery及原生javascript对jsonp解决跨域问题实例详解