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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
Paypal支付不完全指北
Jun 04 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
德劲1102收音机的打理维修案例
2021/03/02 无线电
php中神奇的fastcgi_finish_request
2011/05/02 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript string 扩展库代码
2010/04/09 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python实现八大排序算法(2)
2017/09/14 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python中整数的缓存机制讲解
2019/02/16 Python
NumPy 数组使用大全
2019/04/25 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
大专生的学习自我评价
2013/12/04 职场文书
2013的个人自我评价
2013/12/26 职场文书
致100米运动员广播稿
2014/02/14 职场文书
金融管理应届生求职信
2014/02/20 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
离婚协议书的范本
2015/01/27 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电