웹 프론트엔드 JS 튜토리얼 IE와 Firefox browsers_javascript 기술 간의 이벤트 호환성 요약

IE와 Firefox browsers_javascript 기술 간의 이벤트 호환성 요약

May 16, 2016 pm 06:40 PM
event ie mozilla

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

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相当。
见代码:
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 = "텍스트"

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 호환성 모음

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Mozilla Firefox는 XPCOM 플러그인 솔루션을 로드할 수 없습니다. Mozilla Firefox는 XPCOM 플러그인 솔루션을 로드할 수 없습니다. Apr 24, 2023 am 10:22 AM

Mozilla Firefox는 Google Chrome, Safari, Opera와 같은 브라우저 사용자 목록에서 3위를 차지했습니다. 그러나 때때로 Firefox를 여는 동안 사용자는 "XPCOM을 로드할 수 없습니다!"라는 오류 메시지를 표시합니다. 이 오류로 인해 Mozilla Firefox가 전혀 열리지 않습니다. 비상 솔루션을 찾고 있는 사용자 중 한 명이라면 올바른 위치에 오셨습니다. 빠른 수정 – 1. 장치를 한 번 다시 시작해 보세요. 그런 다음 Firefox를 다시 열어보세요. 2. 인터넷 연결을 확인하세요. 수정 1 – Firefox 새로 고침 다른 작업을 하기 전에 Firefox를 새로 고쳐 보십시오. 1. ⊞Win 키 + R을 눌러야 합니다.

Mozilla의 Thunderbird 이메일 클라이언트가 완전히 재구성되었으며 새 버전 115가 7월에 출시될 예정입니다. Mozilla의 Thunderbird 이메일 클라이언트가 완전히 재구성되었으며 새 버전 115가 7월에 출시될 예정입니다. Mar 05, 2024 pm 06:52 PM

최근 뉴스에 따르면 Mozilla의 오픈 소스 이메일 클라이언트 Thunderbird는 이전에 로고를 업데이트했으며 사용자 인터페이스는 현재 업데이트 중입니다. Mozilla는 Thunderbird를 완전히 리팩토링했습니다. 애플리케이션은 현재 빠르게 개발되고 있으며 소프트웨어 버전이 91에서 102로 바로 향상되었습니다. ▲사진 출처 모질라 썬더버드 ▲사진 출처 모질라 썬더버드 올해 2월, 모질라는 이메일 클라이언트 썬더버드에 대한 대대적인 혁신 프로젝트를 시작하겠다고 보도자료를 발표했다. 썬더버드는 2020년 초부터 모질라 자회사인 MZ에서 개발을 진행해왔다.

win11에서 ie11 브라우저를 사용할 수 없으면 어떻게 해야 합니까? (win11은 IE 브라우저를 사용할 수 없습니다) win11에서 ie11 브라우저를 사용할 수 없으면 어떻게 해야 합니까? (win11은 IE 브라우저를 사용할 수 없습니다) Feb 10, 2024 am 10:30 AM

점점 더 많은 사용자들이 win11 시스템을 업그레이드하기 시작하고 있습니다. 사용자마다 사용 습관이 다르기 때문에 여전히 많은 사용자들이 ie11 브라우저를 사용하고 있습니다. 그렇다면 win11 시스템에서 ie 브라우저를 사용할 수 없으면 어떻게 해야 합니까? windows11은 여전히 ​​ie11을 지원하나요? 해결책을 살펴보겠습니다. win11에서 ie11 브라우저를 사용할 수 없는 문제 해결 방법 1. 먼저 시작 메뉴를 마우스 오른쪽 버튼으로 클릭한 후 "명령 프롬프트(관리자)"를 선택하여 엽니다. 2. 연 후 "Netshwinsockreset"을 직접 입력하고 Enter를 눌러 확인합니다. 3. 확인 후 "netshadvfirewallreset&rdqu"를 입력하세요.

Internet Explorer에서 Edge 열기: MS Edge 리디렉션을 중지하는 방법 Internet Explorer에서 Edge 열기: MS Edge 리디렉션을 중지하는 방법 Apr 14, 2023 pm 06:13 PM

Internet Explorer가 오랫동안 인기를 끌지 못했다는 것은 비밀이 아니지만 Windows 11이 출시되면서 현실이 시작되었습니다. 나중에 IE를 대체하는 경우도 있지만 이제 Edge는 Microsoft 최신 운영 체제의 기본 브라우저입니다. 현재로서는 Windows 11에서 Internet Explorer를 계속 활성화할 수 있습니다. 그러나 IE11(최신 버전)은 이미 공식적인 종료 날짜인 2022년 6월 15일을 갖고 있으며 시계는 계속 흐르고 있습니다. 이를 염두에 두고 Internet Explorer가 때때로 Edge를 여는 것을 발견했을 수 있으며 마음에 들지 않을 수도 있습니다. 그럼 왜 이런 일이 일어나는 걸까요? 존재하다

PHP8.0의 이벤트 처리 라이브러리: 이벤트 PHP8.0의 이벤트 처리 라이브러리: 이벤트 May 14, 2023 pm 05:40 PM

PHP8.0의 이벤트 처리 라이브러리: 이벤트 인터넷의 지속적인 발전과 함께 널리 사용되는 백엔드 프로그래밍 언어인 PHP는 다양한 웹 애플리케이션 개발에 널리 사용됩니다. 이 과정에서 이벤트 중심 메커니즘은 매우 중요한 부분이 되었습니다. PHP8.0의 이벤트 처리 라이브러리 Event는 보다 효율적이고 유연한 이벤트 처리 방법을 제공합니다. 이벤트 처리란 무엇입니까? 이벤트 처리는 웹 애플리케이션 개발에 있어 매우 중요한 개념입니다. 이벤트는 모든 종류의 사용자 행일 수 있습니다.

Mozilla는 Firefox에 수직 탭 도입을 고려하고 있습니다. Mozilla는 Firefox에 수직 탭 도입을 고려하고 있습니다. Apr 15, 2023 pm 12:10 PM

제가 Microsoft Edge에서 좋아하는 점 중 하나는 사이드바에서 탭에 액세스할 수 있는 옵션입니다. Mozilla가 Firefox에 세로 탭 지원을 추가할 수 있을 것 같습니다. 약 1년 전 Edge에 도입된 이 옵션을 사용하면 일반적으로 창 상단에 나타나는 탭 표시줄을 숨길 수 있습니다. 이 기능을 활성화하면 각 탭에 대한 아이콘이 포함된 사이드바가 생성됩니다. 아이콘 중 하나를 클릭하면 해당 탭으로 전환됩니다. 따라서 동일한 경험을 얻을 수 있지만 더 컴팩트한 인터페이스를 사용할 수 있습니다. 측면 패널을 확장하면 탭을 보다 효율적으로 관리할 수 있습니다. 대부분의 웹사이트에는 화면 양쪽에 많은 공백이 있으며 제 생각에는 세로 탭 표시줄이 보기에 더 나은 경험을 제공합니다.

Mozilla Firefox를 제거할 수 있나요? Mozilla Firefox를 제거할 수 있나요? Mar 15, 2023 pm 04:40 PM

Mozilla Firefox는 제거할 수 있습니다. Firefox는 타사 브라우저이므로 필요하지 않은 경우 제거할 수 있습니다. 제거 방법: 1. 시작 메뉴에서 "Windwos 시스템" - "제어판"을 클릭합니다. 2. "제어판" 인터페이스에서 "프로그램 및 기능"을 클릭합니다. 3. 새 인터페이스에서 찾아 두 번 클릭합니다. Firefox 브라우저 아이콘 4. 제거 팝업 창에서 "다음"을 클릭합니다. 5. "제거"를 클릭합니다.

Win10에서 IE를 열 때 Edge로 자동 점프를 취소하는 방법_IE 브라우저 페이지 자동 점프에 대한 솔루션 Win10에서 IE를 열 때 Edge로 자동 점프를 취소하는 방법_IE 브라우저 페이지 자동 점프에 대한 솔루션 Mar 20, 2024 pm 09:21 PM

최근 많은 win10 사용자는 컴퓨터 브라우저를 사용할 때 IE 브라우저가 항상 자동으로 엣지 브라우저로 이동한다는 사실을 발견했습니다. 그러면 win10에서 IE를 열 때 자동 엣지 브라우저로 이동을 끄는 방법은 무엇입니까? 이 사이트에서는 win10에서 IE를 열 때 자동으로 가장자리로 이동하고 닫는 방법을 사용자에게 주의 깊게 소개합니다. 1. 엣지 브라우저에 로그인하고 오른쪽 상단에서...를 클릭하고 드롭다운 설정 옵션을 찾습니다. 2. 설정을 입력한 후 왼쪽 열에서 기본 브라우저를 클릭합니다. 3. 마지막으로 호환성에서 웹사이트가 IE 모드에서 다시 로드되는 것을 허용하지 않는 확인란을 선택하고 IE 브라우저를 다시 시작합니다.

See all articles