原生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 入门级学习笔记及源码
Jan 22 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
Vue router配置与使用分析讲解
Dec 24 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php部分常见问题总结
2008/03/27 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
学习php分页代码实例
2013/10/24 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
express 项目分层实践详解
2018/12/10 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Python配置mysql的教程(推荐)
2017/10/13 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python如何实现线程间通信
2020/07/30 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
函授毕业自我鉴定
2014/02/04 职场文书
党员评议个人总结
2014/10/20 职场文书
玄武湖导游词
2015/02/05 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js