IE和Mozilla的兼容性汇总event


Posted in Javascript onAugust 12, 2007
1,关于event的用法
存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用。
例如: <input type="button" value="clickMe" nclick="doIt()">
<script. language="javascript">
function doIt(){
alert(event);
}
</script> 这段代码在Mozilla浏览器中是不能正常工作的,因为Mozilla浏览器中没有默认的event对象,只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz
<input type="button" value="clickMe" nclick="doIt(event)">
<script. language="javascript">
function doIt(oEvent){
alert(oEvent);
}
</script>

2,关于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相当于ie下的event.srcElement,但细节上有区别,后者是返回一个Html Element
而e.target返回的是个节点,也就是说包括文本节点。
看下面的例子代码,可以看出两者的区别和联系:
IE ONLY
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="javascript">

function doIt(){ alert(event.srcElement.tagName); }

</script>

Moz
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="javascript">

function doIt(oEvent){

var Target = oEvent.target;

while(oTarget.nodeType != 1)

Target = oTarget.parentNode;

alert(oTarget.tagName);

}

</script>

3,键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE
<input type="text" nkeypress="doIt()"><script. language="javascript"> function doIt(){ alert(event.keyCode); }</script>

Moz
<input type="text" nkeypress="doIt(event)"><script. language="javascript"> function doIt(oEvent){ alert(oEvent.which) }</script>

4,event.x,event.y[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的绝对位置,使用event对象的event.x和event.y
Moz中取鼠标点击的绝对位置,使用event对象的event.pageX和event.pageY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="javascript"> function doIt(oEvent){ var posX = oEvent.x ? oEvent.x : oEvent.pageX; var posY = oEvent.y ? oEvent.y : oEvent.pageY; alert("X:" + posX + "\nY:" + posY) }</script>

5,event.offsetX,event.offsetY[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的相对位置,使用event对象的event.offsetX和event.offsetY
Moz中取鼠标点击的相对位置,使用event对象的event.layerX和event.layerY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="javascript"> function doIt(oEvent){ var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX; var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY; alert("X:" + posX + "\nY:" + posY) }</script>

6,事件绑定
事件绑定上Mozilla用addEventListener,removeEventListener
对应IE的attachEvent,detatchEvent

看下面的例子代码:
IE ONLY
<input type="button" value="test" id="testBT"><script. language="javascript">var Button = document.getElementById("testBT");oButton.attachEvent( "onclick", clickEvent );function clickEvent(){ alert("Hello, World!");}</script>

Moz
<input type="button" value="test" id="testBT"><script. language="javascript">var Button = document.getElementById("testBT");oButton.addEventListener( "click", clickEvent, true );function clickEvent(){ alert("Hello, World!");}</script>

注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。
对象选择篇
1,通过ID访问Html元素
一般直接使用document.getElementById就可以了,如果要兼容IE4,可以再加上document.all
IE&Moz
<input type="button" value="clickMe" id="myButton"><script. language="javascript"> alert(document.getElementById("myButton").value);</script>

2,如果要使用document.form.item类似的访问方法,要注意下面的问题:
IE中允许存在类似于 document.formName.item("itemName") 这样的语句,但是Moz下是不可以的
要想在Mozilla下也可以正常运行,需要把写法正规化,如下:
IE&Moz
<body> <form. name="myForm"> <input value="test" id="txt" /> </form> </body> <script. language="javascript"> alert(document.myForm.elements["txt"].value); </script>

注意:在Mozilla中,访问数组的时候,不能用类似于arr("itemName")的形式,必须使用中括号,而在IE中两者都可以。
另外,在写上面这段测试代码的时候,我发现了Mozilla浏览器的一个有趣的问题,不知道是不是Bug。大家可以试一下下面这段代码:
Moz
<form. name="myForm"> <input value="test" id="txt" /> </form> <script. language="javascript"> alert(document.myForm); alert(document.forms.length); //结果为0???</script>

Moz
<body><form. name="myForm"><input value="test" id="txt" /></form></body><script. language="javascript">alert(document.myForm);alert(document.forms.length); //结果为1,正常</script>

个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1,删除节点
IE中有removeNode方法,可以对节点进行删除,如下:
IE
<input type="button" value="clickMe" id="myButton">

<script. language="javascript">

document.getElementById("myButton").removeNode();

</script>

但是Mozilla中,没有这个方法,只能是先找到父节点,然后调用Dom方法removeChild才可以达到目的,如下:
IE&Moz
<input type="button" value="clickMe" id="myButton">

<script. language="javascript">

var Node = document.getElementById("myButton");

oNode.parentNode.removeChild(oNode);

</script>

2,交换节点
IE中有swapNode方法可以交换两个HTML元素节点,如下:
IE
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="javascript"> var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>

但是Mozilla中,没有这个方法,可以自己写函数实现,如下:
IE&Moz
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="javascript"> if(window.Node) { Node.prototype.swapNode=function(node) { var nextSibling=this.nextSibling; var parentNode=this.parentNode; node.parentNode.replaceChild(this,node); parentNode.insertBefore(node,nextSibling); } } var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>

3,关于节点的插入
IE中,有insertAdjacentHTML和insertAdjacentElement两个好用的方法,如下:
IE
<div id="div1" style="border:1px solid black">div1<script. language="javascript"> var Div = document.getElementById("div1"); var htmlInput = "<input>"; oDiv.insertAdjacentHTML('beforeEnd',htmlInput);</script>

但是Mozilla中是没有这两个方法的,为了兼容它们,统一采用Dom的insertBefore方法,如下:
IE&Moz
<div id="div1" style="border:1px solid black">div1<script. language="javascript">

var Div = document.getElementById("div1");

var Element = document.createElement("input");

oElement.type = "text";

oDiv.insertBefore(oElement,null);

</script>

4,关于innerHTML和innerText
对于innerHTML,IE和Mozilla都是支持的,所以没什么问题,但是对于innerText,只有IE有,Moz是没有的
更多相关文章
IE和Firefox在JavaScript应用中的兼容性探讨
IE与Firefox在JavaScript上的7个不同写法小结
javascript css在IE和Firefox中区别分析
JS的IE和Firefox兼容性集锦

Javascript 相关文章推荐
AngularJS入门教程之Hello World!
Dec 06 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
Redux实现组合计数器的示例代码
Jul 04 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 #Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 #Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 #Javascript
网上应用的一个不错common.js脚本
Aug 08 #Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 #Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 #Javascript
You might like
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python实现对变位词的判断方法
2020/04/05 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
出纳会计岗位职责
2014/03/12 职场文书
乔迁之喜主持词
2014/03/27 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript