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>

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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