web-dev-qa-db-ja.com

Internet ExplorerのaddEventListener

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

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

Internet Explorerではどのように機能しますか？

addEventListenerに等しい関数があり、わからない場合は、説明してください。

任意の助けをいただければ幸いです。問題を解決するためのまったく異なる方法を提案してください。

javascriptinternet-explorerinternet-explorer-9addeventlistener
62
The Mask

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["on"+evnt] = func;
   }
}
141
user278064

JQueryの作者であるJohn Resigは、IEの不適切または存在しないaddEventとの互換性の問題を回避するために、removeEventおよびaddEventListenerのクロスブラウザー実装のバージョンを提出しました。

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/

16
jchook

私はこのソリューションを使用しており、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などの両方で機能します。

14
RTeobaldo

Delanが言ったように、新しいバージョンにはaddEventListenerを、古いバージョンにはattachEventを組み合わせて使いたいと思います。

[〜＃〜] mdn [〜＃〜] でイベントリスナーの詳細を確認できます。 （リスナーには「this」の値に関するいくつかの注意事項があることに注意してください）。

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

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

ここに、美しいコードが好きな人向けのものがあります。

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 から恥知らずに盗まれた。

2
Eddie

addEventListenerはバージョン9以降でサポートされています。古いバージョンでは、やや似たattachEvent関数を使用します。

1
Delan Azabani

編集

EventListenerインターフェイスをエミュレートするスニペットを作成しました。ie8インターフェイスは、プレーンオブジェクト上でも呼び出し可能です。 https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

古い回答

これは、addEventListenerまたは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)
1
asdru

これらのポリフィルを使用します https://github.com/WebReflection/ie8

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