IE 와 Firefox 브 라 우 저의 이벤트 호환성 집합

7991 단어 IEMozillaevent
1.이벤트 의 사용법 에 문제 가 있 습 니 다.IE 에 서 는 이벤트 대상 을 직접 사용 할 수 있 지만 Mozilla 에 서 는 직접 사용 할 수 없습니다.예 를 들 어

     function doIt(){ 
           alert(event);
       }
이 코드 는 Mozilla 브 라 우 저 에서 정상적으로 작 동 하지 않 습 니 다.Mozilla 브 라 우 저 에 기본 이벤트 대상 이 없 기 때문에 이벤트 가 발생 하 는 현장에서 만 사용 할 수 있 습 니 다.둘 다 호 환 되 는 코드 를 살 펴 보 겠 습 니 다.IE&Moz

       function doIt(oEvent){
                    alert(oEvent);
       }

2.event.srcElement[IE]와 event.target[Mozilla]Mozilla 의 e.target 은 ie 의 event.srcElement 에 해당 하지만 세부 적 으로 차이 가 있 습 니 다.후 자 는 Html Element 를 되 돌려 줍 니 다.   e.target 은 노드 를 되 돌려 줍 니 다.즉,텍스트 노드 를 포함 합 니 다.아래 의 예 코드 를 보면 이들 의 차이 점 과 관 계 를 알 수 있 습 니 다.IE ONLY
12
34

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

Moz
12
34

       function doIt(oEvent){
                 var Target = oEvent.target;
                  while(oTarget.nodeType != 1)
                            Target = oTarget.parentNode;
                            alert(oTarget.tagName);
         }

3.키보드 값 의 획득 Mozilla 의 event.which 는 IE 의 event.keyCode 와 비슷 합 니 다.코드 참조:IEfunction doIt(){alert(event.keyCode);}
Moz function doIt(oEvent){ alert(oEvent.which) }
4.event.x,event.y[IE]와 event.pageX,event.pageY[Moz]IE 에서 마우스 클릭 의 절대 위 치 를 취하 고 이벤트 대상 의 event.x 와 event.y Moz 에서 마우스 클릭 의 절대 위 치 를 취하 고 이벤트 대상 의 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 + "Y:" + posY) }
5,event.offsetX,event.offsetY[IE]와 event.pageX,event.pagey[Moz]IE 에서 마우스 클릭 의 상대 위 치 를 취하 고 이벤트 대상 의 event.offsetX 와 event.offsetY Moz 에서 마우스 클릭 의 상대 위 치 를 취하 고 이벤트 대상 의 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 + "Y:" + posY) }
6,이벤트 바 인 딩 이벤트 바 인 딩 Mozilla 는 addEventListener,removeEventListener 는 IE 의 attachEvent,detatchEvent 에 대응 합 니 다.   아래 의 예 코드 를 보십시오:IE ONLYvar Button=document.getElement ById("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.getElement ById 를 사용 하면 됩 니 다.IE4 를 호 환 하려 면 document.all IE&Mozalert(document.getElement ById("my Button").value);
2.document.form.item 과 유사 한 접근 방법 을 사용 하려 면 다음 과 같은 문 제 를 주의해 야 합 니 다.IE 에 document.formName.item("itemName")과 같은 문 구 를 허용 하지만 Moz 에 서 는 안 됩 니 다.Mozilla 에서 도 정상적으로 실행 하려 면 쓰기 법 을 정규 화해 야 합 니 다.IE&Mozalert(document.myForm.elements["txt"].value);
메모:Mozilla 에서 배열 에 접근 할 때 arr(itemName)와 유사 한 형식 을 사용 할 수 없습니다.괄호 를 사용 해 야 합 니 다.IE 에 서 는 둘 다 가능 합 니 다.또한 이 테스트 코드 를 적 을 때 모 질 라 브 라 우 저의 재 미 있 는 문 제 를 발 견 했 습 니 다.Bug 인지 아 닌 지 모 르 겠 습 니 다.다음 코드 를 사용 해 보십시오.Mozalert(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 요소 노드 를 교환 할 수 있 습 니 다.다음 과 같 습 니 다.IEvar First=document.getElement ById("firstButton");var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);
그러나 Mozilla 에 서 는 이 방법 이 없습니다.함 수 를 직접 써 서 실현 할 수 있 습 니 다.다음 과 같 습 니 다.IE&Mozif(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
div1var Div=document.getElement ById("div 1");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 는 더 많은 관련 글 이 없습니다.

좋은 웹페이지 즐겨찾기