웹 프론트엔드 JS 튜토리얼 javascript 浏览器兼容性事件处理机制

javascript 浏览器兼容性事件处理机制

Jun 01, 2016 am 09:54 AM
javascript 호환성 브라우저

使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? 下面我们就一点点铺开来讲.

首先,DOM Level2为事件处理定义了两个函数addEventListener和removeEventListener, 这两个函数都来自于EventTarget接口. 

<code class="language-javascript">element.addEventListener(eventName, listener, useCapture); 
element.removeEventListener(eventName, listener, useCapture); </code>
로그인 후 복사

EventTarget接口通常实现自Node或Window接口.也就是所谓的DOM元素. 

那么比如window也就可以通过addEventListener来添加监听. 

<code class="language-javascript">function loadHandler() { 
console.log('the page is loaded!'); 
} 
window.addEventListener('load', loadHandler, false); </code>
로그인 후 복사

移除监听通过removeEventListener同样很容易做到, 只要注意移除的句柄和添加的句柄引用自一个函数就可以了. 

<code class="language-javascript">window.removeEventListener('load', loadHandler, false); </code>
로그인 후 복사

如果我们活在完美世界.那么估计事件函数就此结束了. 

但情况并非如此.由于IE独树一帜.通过MSDHTML DOM定义了attachEvent和detachEvent两个函数取代了addEventListener和removeEventListener. 

恰恰函数间又存在着很多的差异性,使整个事件机制变得异常复杂. 

所以我们要做的事情其实就转移成了.处理IE浏览器和w3c标准之间对于事件处理的差异性. 

在IE下添加监听和移除监听可以这样写 

<code class="language-javascript">function loadHandler() { 
alert('the page is loaded!'); 
} 
window.attachEvent('onload', loadHandler); // 添加监听 
window.detachEvent('onload', loadHandler); // 移除监听 </code>
로그인 후 복사

从表象看来,我们可以看出IE与w3c的两处差异: 

1. 事件前面多了个"on"前缀. 
2. 去除了useCapture第三个参数. 

其实真正的差异远远不止这些.等我们后面会继续分析.那么对于现在这两处差异我们很容易就可以抽象出一个公用的函数 

<code class="language-javascript">function addListener(element, eventName, handler) { 
if (element.addEventListener) { 
element.addEventListener(eventName, handler, false); 
} 
else if (element.attachEvent) { 
element.attachEvent('on' + eventName, handler); 
} 
else { 
element['on' + eventName] = handler; 
} 
} 
function removeListener(element, eventName, handler) { 
if (element.addEventListener) { 
element.removeEventListener(eventName, handler, false); 
} 
else if (element.detachEvent) { 
element.detachEvent('on' + eventName, handler); 
} 
else { 
element['on' + eventName] = null; 
} 
} </code>
로그인 후 복사

上面函数有两处需要注意一下就是: 

1. 第一个分支最好先测定w3c标准. 因为IE也渐渐向标准靠近. 第二个分支监测IE. 
2. 第三个分支是留给既不支持(add/remove)EventListener也不支持(attach/detach)Event的浏览器. 

性能优化 

对于上面的函数我们是运用"运行时"监测的.也就是每次绑定事件都需要进行分支监测.我们可以将其改为"运行前"就确定兼容函数.而不需要每次监测. 

这样我们就需要用一个DOM元素提前进行探测. 这里我们选用了document.documentElement. 为什么不用document.body呢? 因为document.documentElement在document没有ready的时候就已经存在. 而document.body没ready前是不存在的. 

这样函数就优化成 

<code class="language-javascript">var addListener, removeListener, 
/* test element */ 
docEl = document.documentElement; 
// addListener 
if (docEl.addEventListener) { 
/* if `addEventListener` exists on test element, define function to use `addEventListener` */ 
addListener = function (element, eventName, handler) { 
element.addEventListener(eventName, handler, false); 
}; 
} 
else if (docEl.attachEvent) { 
/* if `attachEvent` exists on test element, define function to use `attachEvent` */ 
addListener = function (element, eventName, handler) { 
element.attachEvent('on' + eventName, handler); 
}; 
} 
else { 
/* if neither methods exists on test element, define function to fallback strategy */ 
addListener = function (element, eventName, handler) { 
element['on' + eventName] = handler; 
}; 
} 
// removeListener 
if (docEl.removeEventListener) { 
removeListener = function (element, eventName, handler) { 
element.removeEventListener(eventName, handler, false); 
}; 
} 
else if (docEl.detachEvent) { 
removeListener = function (element, eventName, handler) { 
element.detachEvent('on' + eventName, handler); 
}; 
} 
else { 
removeListener = function (element, eventName, handler) { 
element['on' + eventName] = null; 
}; 
} </code>
로그인 후 복사

这样就避免了每次绑定都需要判断. 

值得一提的是.上面的代码其实也是有两处硬伤. 除了代码量增多外, 还有一点就是使用了硬性编码推测.上面代码我们基本的意思就是断定.如果document.documentElement具备了add/remove方法.那么element就一定具备(虽然大多数情况如此).但这显然是不够安全. 

不安全的检测 

下面两个例子说明.在某些情况下这种检测不是足够安全的. 

<code class="language-javascript">// In Internet Explorer 
var xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
if (xhr.open) { } // Error 
var element = document.createElement('p'); 
if (element.offsetParent) { } // Error </code>
로그인 후 복사

如: 在IE7下 typeof xhr.open === 'unknown'. 详细可参考feature-detection 

所以我们提倡的检测方式是 

<code class="language-javascript">var isHostMethod = function (object, methodName) { 
var t = typeof object[methodName]; 
return ((t === 'function' || t === 'object') && !!object[methodName]) || t === 'unknown'; 
}; </code>
로그인 후 복사

这样我们上面的优化函数.再次改进成这样

<code class="language-javascript">var addListener, docEl = document.documentElement; 
if (isHostMethod(docEl, 'addEventListener')) { 
/* ... */ 
} 
else if (isHostMethod(docEl, 'attachEvent')) { 
/* ... */ 
} 
else { 
/* ... */ 
} </code>
로그인 후 복사

丢失的this指针 

this指针的处理.IE与w3c又出现了差异.在w3c下函数的指针是指向绑定该句柄的DOM元素. 而IE下却总是指向window. 

<code class="language-javascript">// IE 
document.body.attachEvent('onclick', function () { 
alert(this === window); // true 
alert(this === document.body); // false 
}); 
// W3C 
document.body.addEventListener('onclick', function () { 
alert(this === window); // false 
alert(this === document.body); // true 
}); </code>
로그인 후 복사

这个问题修正起来也不算麻烦 

<code class="language-javascript">if (isHostMethod(docEl, 'addEventListener')) { 
/* ... */ 
} 
else if (isHostMethod(docEl, 'attachEvent')) { 
addListener = function (element, eventName, handler) { 
element.attachEvent('on' + eventName, function () { 
handler.call(element, window.event); 
}); 
}; 
} 
else { 
/* ... */ 
} </code>
로그인 후 복사

我们只需要用一个包装函数.然后在内部将handler用call重新修正指针.其实大伙应该也看出了,这里还偷偷的修正了一个问题就是.IE下event不是通过第一个函数传递,而是遗留在全局.所以我们经常会写event = event || window.event这样的代码. 这里也一并做了修正. 

修正了这几个主要的问题.我们这个函数看起来似乎健壮了很多.我们可以暂停一下做下简单的测试, 测试三点

1. 各浏览器兼容 2. this指针指向兼容 3. event参数传递兼容. 

测试代码如下:

<code class="language-javascript">

<title> Event Test UseCase </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
 
 
<div id="odiv" style="width:200px;height:100px;background-color:red; text-align:center">娴</div></code>
로그인 후 복사
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

OUYI 공식 웹 사이트의 최신 등록 포털 OUYI 공식 웹 사이트의 최신 등록 포털 Mar 21, 2025 pm 05:54 PM

세계 최고의 디지털 자산 거래 플랫폼 인 Ouyi Okx는 풍부한 거래 제품, 강력한 보안 보증 및 편리한 사용자 경험으로 많은 투자자를 유치합니다. 그러나 네트워크 보안의 위험이 점점 심해지고 있으며 공식 OUYI OKX 계정을 안전하게 등록하는 방법이 중요합니다. 이 기사는 OUYI OKX 공식 웹 사이트의 최신 등록 포털을 제공하고 공식 웹 사이트를 식별하고 강력한 암호를 설정하고 2 인용 암호 검증을 활성화하는 방법을 포함하여 안전한 등록 단계와 예방 조치를 자세히 설명하여 디지털 자산 투자 여행을 안전하고 편리하게 시작하는 데 도움이됩니다. 디지털 자산 투자에는 위험이 있습니다. 신중한 결정을 내리십시오.

코인베이스 교환 로그인 포트 2025 코인베이스 교환 로그인 포트 2025 Mar 21, 2025 pm 05:51 PM

Coinbase 보안 로그인 안내서 : 피싱 사이트 및 사기를 피하는 방법은 무엇입니까? 피싱과 사기는 점점 더 만연해지고 있으며 Coinbase 공식 로그인 포털에 안전하게 액세스하는 것이 중요합니다. 이 기사는 사용자가 코인베이스의 최신 공식 로그인 포털을 안전하게 찾아 사용하여 디지털 자산의 보안을 보호 할 수 있도록 실용적인 가이드를 제공합니다. 우리는 피싱 사이트를 식별하는 방법과 공식 웹 사이트, 모바일 앱 또는 신뢰할 수있는 타사 플랫폼을 통해 안전하게 로그인하는 방법을 다루고 강력한 비밀번호 사용 및 2 요인 검증 가능성과 같은 계정 보안을 향상시키기위한 제안을 제공합니다. 잘못된 로그인으로 인한 자산 손실을 피하려면이 기사를주의 깊게 읽으십시오!

Ouyi Exchange App 국내 다운로드 자습서 Ouyi Exchange App 국내 다운로드 자습서 Mar 21, 2025 pm 05:42 PM

이 기사는 중국의 Ouyi Okx 앱의 안전한 다운로드에 대한 자세한 안내서를 제공합니다. 국내 앱 스토어의 제한으로 인해 사용자는 OUYI OKX의 공식 웹 사이트를 통해 앱을 다운로드하거나 공식 웹 사이트에서 제공 한 QR 코드를 사용하여 스캔 및 다운로드하는 것이 좋습니다. 다운로드 프로세스 중에 공식 웹 사이트 주소를 확인하고 응용 프로그램 권한을 확인하고 설치 후 보안 스캔을 수행하며 2 요인 확인을 활성화하십시오. 사용하는 동안 현지 법률 및 규정을 따르고, 안전한 네트워크 환경을 사용하고, 계정 보안을 보호하고, 사기에 대해 경계하고, 합리적으로 투자하십시오. 이 기사는 참조 용이며 투자 조언은 자신의 위험에 처해 있습니다.

Ouyi Exchange 웹 버전 등록 포털 OUYI 등록 포털 Ouyi Exchange 웹 버전 등록 포털 OUYI 등록 포털 Mar 20, 2025 pm 05:48 PM

이 기사는 Ouyi OKX Exchange의 공식 웹 사이트에 계정을 등록하고 Cryptocurrency 거래를 시작하는 방법에 대해 자세히 설명합니다. OUYI는 세계 최고의 암호 화폐 거래소로서 광범위한 거래 품종, 여러 거래 방법 및 강력한 보안 보증을 제공하며 다양한 피아트 및 암호 화폐의 편리한 철수를 지원합니다. 이 기사는 OUYI 공식 웹 사이트 등록 입력에 대한 검색 방법, 자세한 등록 단계 (이메일/모바일 등록, 정보 작성, 검증 코드 확인 등) 및 등록 후 예방 조치 (KYC 인증, 보안 설정 등)를 다루고 일반적인 질문에 대한 답변을 제공하여 초보자 사용자를 빠르고 안전하게 완료하고 Cryptocency Vourdy를 시작합니다.

Binance 공식 웹 사이트 Real-Name Authentication Portal 2025 Binance 공식 웹 사이트 Real-Name Authentication Portal 2025 Mar 18, 2025 pm 01:51 PM

Binance 공식 웹 사이트 Real-Name Authentication Tutorial : 계정 보안 개선, 더 많은 거래 기능 및 더 높은 금액을 잠금 해제하십시오! 이 기사에서는 공식 웹 사이트에 로그인, 확인 페이지를 입력하고 인증 수준 (기본, 중간 및 고급 및 고급)을 선택하고 ID 카드, 여권 및 기타 문서 및 비디오 확인을 다루고 검토 결과보기를 포함하여 Binance Account Authentication을 완료하도록 자세히 설명합니다. 계정의 안전을 보장하고보다 편리한 거래 경험을 즐기기 위해 Binance Real-Name 인증을 빠르게 완료하십시오!

발행 가격 및 직기 동전 발행 시간에 대한 자세한 설명 발행 가격 및 직기 동전 발행 시간에 대한 자세한 설명 Mar 20, 2025 pm 06:21 PM

한 번만 알려진 블록 체인 게임이자 소셜 애플리케이션 개발 플랫폼 토큰 인 Loom Coin은 2018 년 4 월 25 일에 코인 당 약 0.076 달러의 문제 가격으로 2018 년 4 월 25 일에 개최되었습니다. 이 기사는 시장 변동성 위험 및 프로젝트 개발 전망을 포함하여 직기 동전의 발행 시간, 가격 및 중요한 예방 조치에 대한 심층적 인 논의를 수행 할 것입니다. 투자자는 조심해야하며 트렌드를 맹목적으로 따르지 않아야합니다.이 기사의 공식 웹 사이트, 블록 체인 브라우저 및 Cryptocurrency 정보 플랫폼을 참조하십시오. 직기 동전에 대해 배우고 여기에서 시작하십시오!

Binance Exchange App 국내 다운로드 자습서 Binance Exchange App 국내 다운로드 자습서 Mar 21, 2025 pm 05:45 PM

이 기사는 안전하고 신뢰할 수있는 Binance Exchange 앱 다운로드 가이드를 제공하여 사용자가 국가에서 Binance 앱 다운로드 문제를 해결할 수 있도록 도와줍니다. 국내 애플리케이션 상점에 대한 제한으로 인해이 기사는 Binance 공식 웹 사이트에서 APK 설치 패키지를 다운로드하는 데 우선 순위를두고 있으며 공식 웹 사이트 다운로드, 제 3 자 애플리케이션 상점 다운로드 및 동시에 공식 웹 사이트 주소를 확인하는 동안 보안 예방 조치를 강조합니다. 또한이 기사는 사용자에게 현지 법률 및 규정을 이해하고, 네트워크 보안에주의를 기울이고, 개인 정보 보호, 사기, 합리적 투자를 조심하고, 보안 거래를 조심해야한다고 상기시킵니다. 기사가 끝나면 기사는 Binance 앱 다운로드 및 사용이 현지 법률 및 규정을 준수해야하며 자신의 위험에 따라 투자 조언을 구성하지 않는다는 점을 다시 한 번 강조했습니다.

Bitmex Exchange의 최신 공식 웹 사이트에 로그인하십시오. Bitmex Exchange의 최신 공식 웹 사이트에 로그인하십시오. Mar 21, 2025 pm 06:06 PM

이 기사는 사용자가 Bitmex Exchange의 최신 공식 웹 사이트에 액세스하고 거래 보안을 개선 할 수 있도록 안전하고 신뢰할 수있는 가이드를 제공합니다. 규제 및 사이버 보안 위협으로 인해 공식 Bitmex 웹 사이트를 식별하고 피싱 웹 사이트가 계정 정보 및 자금을 훔치는 것을 피하는 것이 중요합니다. 이 기사는 신뢰할 수있는 cryptocurrency 플랫폼, 공식 소셜 미디어, 뉴스 미디어 및 공식 이메일을 통해 공식 웹 사이트 포털 검색을 소개합니다. HTTPS 연결, 보안 증명서 확인 및 정기적으로 비밀번호 변경을 사용하여 도메인 이름을 확인하는 것의 중요성을 강조합니다. cryptocurrency 거래는 위험이 높습니다.주의해서 투자하십시오.

See all articles