イベントリスナーとthis

Tweet

Pocket

イベントリスナー内のthisによって参照される要素はFirefoxとIEでは異なります。

• IE ⇒ windowオブジェクト
• Firefox ⇒ イベントが発生した要素ノード(イベントハンドラと同じ)

IEはイベントが発生した要素をthisではなくイベントリスナーのコールバック関数の引数に渡されるイベントオブジェクトを利用して取得します。
またFirefoxでもイベントが発生したノードを参照するのにthisの代わりにイベントオブジェクトを利用することもできます。
しかしIEとFirefoxでは利用するイベントオブジェクトのプロパティが異なります。
下記はイベントが発生した要素ノードを取得するためのクロスブラウザに対応したイベントリスナーです

var listener = function () {
    var eventnode =  null;
    if (e.target){ 
        // Firefox
        eventnode = e.target; // もしくは eventnode = this;
    } else if (e.srcElement) {
        // IE
        eventnode =  e.srcElement;
    }
}

関連記事 : イベントハンドラとthis