您的当前位置：首页 IE和Mozilla的兼容性汇总event_javascript技巧

IE和Mozilla的兼容性汇总event_javascript技巧

来源：尚佳旅游分享网

1，关于event的用法
存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。
例如: function doIt(){ alert(event); } 这段代码在Mozilla浏览器中是不能正常工作的，因为Mozilla浏览器中没有默认的event对象，只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz
function doIt(oEvent){ alert(oEvent); }

2，关于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相当于ie下的event.srcElement，但细节上有区别，后者是返回一个Html Element
而e.target返回的是个节点，也就是说包括文本节点。
看下面的例子代码，可以看出两者的区别和联系:
IE ONLY

1	2
3	4

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

Moz

1	2
3	4

function doIt(oEvent){

var Target = oEvent.target;

while(oTarget.nodeType != 1)

Target = oTarget.parentNode;

alert(oTarget.tagName);

}

3，键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE
function doIt(){ alert(event.keyCode); }

Moz
function doIt(oEvent){ alert(oEvent.which) }

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 
 function doIt(oEvent){ var posX = oEvent.x ? oEvent.x : oEvent.pageX; var posY = oEvent.y ? oEvent.y : oEvent.pageY; alert("X:" + posX + "\nY:" + posY) }
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 
 function doIt(oEvent){ var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX; var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY; alert("X:" + posX + "\nY:" + posY) }
6，事件绑定 
事件绑定上Mozilla用addEventListener，removeEventListener 
对应IE的attachEvent，detatchEvent 
看下面的例子代码: 
IE ONLY 
var Button = document.getElementById("testBT");oButton.attachEvent( "onclick", clickEvent );function clickEvent(){ alert("Hello, World!");}
Moz 
var Button = document.getElementById("testBT");oButton.addEventListener( "click", clickEvent, true );function clickEvent(){ alert("Hello, World!");}
注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。 
对象选择篇 
1，通过ID访问Html元素 
一般直接使用document.getElementById就可以了，如果要兼容IE4，可以再加上document.all 
IE&Moz 
 alert(document.getElementById("myButton").value);
2，如果要使用document.form.item类似的访问方法，要注意下面的问题： 
IE中允许存在类似于 document.formName.item("itemName") 这样的语句，但是Moz下是不可以的 
要想在Mozilla下也可以正常运行，需要把写法正规化，如下: 
IE&Moz 
   alert(document.myForm.elements["txt"].value); 
注意:在Mozilla中，访问数组的时候，不能用类似于arr("itemName")的形式，必须使用中括号，而在IE中两者都可以。 
另外，在写上面这段测试代码的时候，我发现了Mozilla浏览器的一个有趣的问题，不知道是不是Bug。大家可以试一下下面这段代码: 
Moz 
 
结果为0？？？
Moz

结果为1，正常

个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1，删除节点
IE中有removeNode方法，可以对节点进行删除，如下：
IE

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

但是Mozilla中，没有这个方法，只能是先找到父节点，然后调用Dom方法removeChild才可以达到目的，如下：
IE&Moz

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

oNode.parentNode.removeChild(oNode);

2，交换节点
IE中有swapNode方法可以交换两个HTML元素节点，如下：
IE
var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);

但是Mozilla中，没有这个方法，可以自己写函数实现，如下：
IE&Moz
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);

3，关于节点的插入
IE中，有insertAdjacentHTML和insertAdjacentElement两个好用的方法，如下：
IE
div1 var Div = document.getElementById("div1"); var htmlInput = ""; oDiv.insertAdjacentHTML('beforeEnd',htmlInput);

但是Mozilla中是没有这两个方法的，为了兼容它们，统一采用Dom的insertBefore方法，如下：
IE&Moz
div1

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

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

oElement.type = "text";

oDiv.insertBefore(oElement,null);

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