Internet ExplorerのaddEventListener

Question

Internet Explorer 9のElementオブジェクトに相当するものは何ですか？

if (!Element.prototype.addEventListener) { 
    Element.prototype.addEventListener = function() { .. } 
} 

Internet Explorerではどのように動作しますか？

addEventListenerと等しい機能があり、わからない場合は、説明してください。

ご協力いただければ幸いです。問題を解決する全く異なる方法を自由に提案してください。

Answer 1

addEventListenerは、イベントハンドラを接続するための適切なDOMメソッドです。

Internet Explorer（バージョン8まで）は代替のattachEventメソッドを使用しました。

Internet Explorer 9は、適切なaddEventListenerメソッドをサポートしています。

以下は、クロスブラウザaddEvent関数を記述するためのものです。

function addEvent(evnt, elem, func) { 
    if (elem.addEventListener) // W3C DOM 
     elem.addEventListener(evnt,func,false); 
    else if (elem.attachEvent) { // IE DOM 
     elem.attachEvent("on"+evnt, func); 
    } 
    else { // No much to do 
     elem[evnt] = func; 
    } 
} 

Answer 2

addEventListenerはバージョン9以降でサポートされています。古いバージョンの場合、やや類似したattachEvent機能を使用します。

Answer 3

Delan氏によると、新しいバージョンの場合はaddEventListenerを、古いバージョンの場合はattachEventの組み合わせを使用します。

イベントリスナーに関する詳細はMDNです。 （リスナーには「this」という値の警告があることに注意してください）。

jQueryのようなフレームワークを使用して、イベント処理を完全に抽象化することもできます。

$("#someelementid").bind("click", function (event) { 
    // etc... $(this) is whetver caused the event 
}); 

Answer 4

ジョンResig氏、jQueryのの著者、IEの不適切または非存在addEventListenerとの互換性の問題を回避するためにaddEventとremoveEventのクロスブラウザの実装の彼のバージョンを提出しました。

function addEvent(obj, type, fn) { 
    if (obj.attachEvent) { 
    obj['e'+type+fn] = fn; 
    obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
    obj.attachEvent('on'+type, obj[type+fn]); 
    } else 
    obj.addEventListener(type, fn, false); 
} 
function removeEvent(obj, type, fn) { 
    if (obj.detachEvent) { 
    obj.detachEvent('on'+type, obj[type+fn]); 
    obj[type+fn] = null; 
    } else 
    obj.removeEventListener(type, fn, false); 
} 

出典：http://ejohn.org/projects/flexible-javascript-events/

Answer 5

私はこのソリューションおよびIE8で作品以上を使用しています。

if (typeof Element.prototype.addEventListener === 'undefined') { 
    Element.prototype.addEventListener = function (e, callback) { 
     e = 'on' + e; 
     return this.attachEvent(e, callback); 
    }; 
    } 

そして：

<button class="click-me">Say Hello</button> 

<script> 
    document.querySelectorAll('.click-me')[0].addEventListener('click', function() { 
    console.log('Hello'); 
    }); 
</script> 

これはIE8とChromeは、Firefoxなどの両方を動作します

Answer 6

EDIT

私もプレーンなオブジェクトで呼び出し可能で、イベントリスナーインターフェースとIE8 1をエミュレートスニペットを書きました：これはエミュレートにaddEventListenerための方法であるか https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

OLD ANSWER

これらのいずれかをサポートしていないブラウザでattachEventを使用してください

(function (w,d) { // 
    var 
     nc = "", nu = "", nr = "", t, 
     a = "addEventListener", 
     n = a in w, 
     c = (nc = "Event")+(n?(nc+= "", "Listener") : (nc+="Listener","")), 
     u = n?(nu = "attach", "add"):(nu = "add","attach"), 
     r = n?(nr = "detach","remove"):(nr = "remove","detach") 
/* 
* the evtf function, when invoked, return "attach" or "detach" "Event" functions if we are on a new browser, otherwise add "add" or "remove" "EventListener" 
*/ 
    function evtf(whoe){return function(evnt,func,capt){return this[whoe]((n?((t = evnt.split("on"))[1] || t[0]) : ("on"+evnt)),func, (!n && capt? (whoe.indexOf("detach") < 0 ? this.setCapture() : this.removeCapture()) : capt ))}} 
    w[nu + nc] = Element.prototype[nu + nc] = document[nu + nc] = evtf(u+c) // (add | attach)Event[Listener] 
    w[nr + nc] = Element.prototype[nr + nc] = document[nr + nc] = evtf(r+c) // (remove | detach)Event[Listener] 

})(window, document) 

希望します。

Answer 7

私は、これらのポリフィルhttps://github.com/WebReflection/ie8

<!--[if IE 8]><script 
    src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js" 
></script><![endif]--> 

Answer 8

ここで美しいコードを見るのが好きな人に何かを使用します。

function addEventListener(obj,evt,func){ 
    if ('addEventListener' in window){ 
     obj.addEventListener(evt,func, false); 
    } else if ('attachEvent' in window){//IE 
     obj.attachEvent('on'+evt,func); 
    } 
} 

恥知らずに盗まれたIframe-Resizer。