집 > 기사 > 웹 프론트엔드 > IE와 Mozilla의 호환성 요약 event_javascript 팁

IE와 Mozilla의 호환성 요약 event_javascript 팁

WBOY원래의: 2016-05-16 19:10:39987검색

1，关于event的用法
存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。
例如:

function doIt(){

alert(event);

}

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

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
alert(document.myForm); alert(document.forms.length); //结果为0？？？

Moz
alert(document.myForm);alert(document.forms.length); //结果为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에는 없습니다.
관련 기사 더보기
JavaScript 애플리케이션에서 IE와 Firefox의 호환성에 대한 논의
IE와 Firefox에서 JavaScript를 작성하는 7가지 방법 요약
IE의 javascript css 및 Firefox 차이점 분석
JS IE 및 Firefox 호환성 모음

성명：

이전 기사：download_javascript 스킬에 첨부된 캡슐화된 도, 시, 지역 연계 제어다음 기사：download_javascript 스킬에 첨부된 캡슐화된 도, 시, 지역 연계 제어