84

addEventListenerそれぞれattachEvent正しく使用する方法を知りたいですか？

window.onload = function (myFunc1) { /* do something */ }

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

また

function myFunc1() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc1);
}

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

？

このクロスブラウザは安全ですか、それとも次のようなものを使用する方がよいでしょうか。

function myFunc1(){ /* do something */ }
function myFunc2(){ /* do something */ }
// ...

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

addOnloadEvent(myFunc1);
addOnloadEvent(myFunc2);
// ...

AND：Saymyfunc2はIE7専用です。それに応じて正しい/好ましい方法を変更するにはどうすればよいですか？

4

2 に答える 2

135

両方の使用方法は似ていますが、どちらもイベント パラメータの構文が少し異なります。

addEventListener ( mdn リファレンス):

すべての主要ブラウザ (FF、Chrome、Edge) でサポート

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

のイベントリストaddEventListener。

attachEvent ( msdn リファレンス):

IE 5-8 でサポート*

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

のイベントリストattachEvent。

引数

両方のメソッドの引数は次のとおりです。

  1. イベントの種類です。
  2. イベントがトリガーされたときに呼び出す関数です。
  3. (addEventListenerのみ) true の場合、ユーザーがキャプチャを開始したいことを示します。

説明

どちらの方法も、要素にイベントを関連付けるという同じ目的を達成するために使用されます。
違いは、古いトライデントレンダリング エンジン ( IE5+ IE5-8*​​) でattachEventのみ使用でき、他のブラウザーの大部分 (FF、Webkit、Opera、IE9+) で実装されている W3 標準であることです。addEventListener

Diaz ソリューションでは得られない正規化を含む、堅実なクロスブラウザー イベント サポートについては、フレームワークを使用します。

*IE9-10 は、下位互換性のために両方の方法をサポートします。

IE11 から削除されたことを指摘してくれたLuke Puplettに感謝しattachEventます。

最小限のクロスブラウザ実装

Smittyが推奨したように、このDustin Diaz addEvent 実装を使用して、フレームワークを使用せずに堅実なクロス ブラウザー実装を実現できます。

function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else 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["on"+type] = obj["e"+type+fn];
  }
}

addEvent( document, 'click', function (e) {
  console.log( 'document click' )
})

于 2012-06-05T12:03:18.727 に答える
7

まだこのディスカッションに参加していて、探している答えが見つからない人は、チェックアウトしてください:
http://dustindiaz.com/rock-solid-addevent

これは、フレームワークの使用に制限がある私たちが見つけた最も洗練されたソリューションの 1 つです。

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    } else 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]);
        EventCache.add(obj, type, fn);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }

}

var EventCache = function() {

    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;

            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };

                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };

                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };

                item[0][item[1]] = null;
            };
        }
    };
}();

addEvent(window, 'unload', EventCache.flush);
于 2012-01-15T20:57:41.720 に答える