原生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获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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下载文件的代码示例
2012/06/29 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript常用函数(1)
2015/11/04 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
使用python实现个性化词云的方法
2017/06/16 Python
python 拼接文件路径的方法
2018/10/23 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python实现数字炸弹游戏程序
2020/07/17 Python
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
总经理助理岗位职责
2013/11/08 职场文书
办理信用卡工作证明
2014/01/11 职场文书
大学校庆策划书
2014/01/31 职场文书
八年级美术教学反思
2014/02/02 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
python glom模块的使用简介
2021/04/13 Python
4种非常实用的python内置数据结构
2021/04/28 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
python热力图实现的完整实例
2022/06/25 Python
keepalived + nginx 实现高可用方案
2022/12/24 Servers