IE和Mozilla的兼容性汇总event

更新时间：2007年08月12日 15:53:15 作者：

IE和Mozilla的兼容性汇总event，需要的朋友可以参考下。

1，关于event的用法
存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。
例如: <input type="button" value="clickMe" nclick="doIt()">

function doIt(){

alert(event);

}

</script> 这段代码在Mozilla浏览器中是不能正常工作的，因为Mozilla浏览器中没有默认的event对象，只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz
<input type="button" value="clickMe" nclick="doIt(event)">

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">

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

</script>

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

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兼容性集锦

您可能感兴趣的文章:

event

怎么判断js脚本加载完成
本篇文章主要是对判断js脚本加载完成的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
webpack4 入门最简单的例子介绍
这篇文章主要介绍了webpack4 入门最简单的例子介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
详解JavaScript前端如何有效处理本地存储和缓存
前端本地存储和缓存的处理是一种重要的技术,它可以帮助改善应用程序的性能和用户体验,下面是小编整理的一些处理前端本地存储和缓存的常用方法,希望对大家有所帮助
2023-11-11
详解JavaScript基于面向对象之继承实例
这篇文章主要介绍了JavaScript基于面向对象之继承实例,需要的朋友可以参考下
2015-12-12
yii form 表单提交之前JS在提交按钮的验证方法
很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证。怎么处理呢？接下来通过本文给大家分享yii form 表单提交之前JS在提交按钮的验证方法，需要的的朋友参考下
2017-03-03
Bootstrap Validator 表单验证
这篇文章主要介绍了Bootstrap Validator 表单验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
深入理解JavaScript中的并行处理
这篇文章给大家详细介绍了JavaScript中的并行处理，一直以来，JavaScript 都并没有多线程的能力，而单线程在让开发者方便的同时，也使它一直不能处理计算量复杂的场景，唯一方法就是让服务端去做。下来通过这篇文章我们一起来看看详细介绍。
2016-09-09
WdatePicker.js时间日期插件的使用方法
本篇文章主要介绍了WdatePicker.js时间日期插件的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。下面这篇文章主要给大家介绍了关于使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置的相关资料，需要的朋友可以参考下
2018-11-11
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
这篇文章主要介绍了微信小程序tab切换可滑动切换导航栏跟随滚动实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09