原生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 相关文章推荐
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
详解React中的组件通信问题
Jul 31 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
详解package.json版本号规则
Aug 01 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
面向对象继承实例(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
用Socket发送电子邮件
2006/10/09 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php异常处理捕获错误整理
2019/09/23 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js 单引号 传递方法
2009/06/22 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python实现socket端口重定向示例
2014/02/10 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python实现将xml导入至excel
2015/11/20 Python
Python分支结构(switch)操作简介
2018/01/17 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
大专生自我评价
2014/01/28 职场文书
社团文化节策划书
2014/02/01 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
陈欧的广告词
2014/03/18 职场文书
岗位工作说明书
2014/07/29 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
MySQL常用慢查询分析工具详解
2022/08/14 MySQL