原生javascript兼容性测试实例


Posted in Javascript onJuly 01, 2013

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="#">文字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 私有成员分析
Jan 13 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 #Javascript
批量实现面向对象的实例代码
Jul 01 #Javascript
js原生appendChild的bug解决心得分享
Jul 01 #Javascript
Jquery时间验证和转换工具小例子
Jul 01 #Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 #Javascript
js函数排序的实例代码
Jul 01 #Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 #Javascript
You might like
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python导入pandas具体步骤方法
2019/06/23 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
初中生操行评语大全
2014/04/24 职场文书
2015年暑期见闻
2015/07/14 职场文书
关于公司年会的开幕词
2016/03/04 职场文书