原生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.alert 弹出式复选框实现代码
Jun 15 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
使用JS实现动态时钟
Mar 12 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
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python中int与str互转方法
2018/07/02 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python实现邮件发送功能
2019/08/10 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
python用Configobj模块读取配置文件
2020/09/26 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
售后服务承诺书模板
2014/05/21 职场文书
食堂标语大全
2014/06/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
校友会致辞
2015/07/30 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
python中取整数的几种方法
2021/11/07 Python