IEでattachEvent/detachEventする時はthisの扱いに注意する(JavaScript)

  • 2011/04/10

ということで、「IEさん、頼むよ...」っていう話。

JavaScriptのIE用イベントハンドラ「attachEvent/detachEvent」。これを使って呼び出したイベント内では、thisがwindowと解釈される落とし穴が。

下記のイベントをIEで実行すると、どうなるか、さっそく検証。

HTML

JavaScript

ボタンのラベル「送信する」がalertで返される、かと思いきや、結果は「undefined」。
これが、IEでattachEventした関数内では、「this」がwindowオブジェクトとなってしまうってこと。
つまり、detachEventもできず、はまるので注意。

じゃあ、どう書けばいいのか。

JavaScript(修正版)

thisの代わりに「evt.srcElement」で、イベント発生元を取得すればよい。
と、ここまでがIEの話。

IE以外は、「addEventListener/removeEventListener」でイベントを制御するから、その振り分けをすればよい。クロスブラウザで動作する、最終的なコードは下記。

JavaScript(クロスブラウザ対応版)

今回、ブラウザ依存の問題に結構はまってしまったけど、イベントのバブリングフェーズとかキャプチャフェーズについて勉強できたから、許す。(←何を?)

たまにネイティブのJavaScriptを書くと、ブラウザの差異を意識しなくていい「jQuery」のありがたみが身にしみますね。。。

補足:JavaScript(detachEventできないパターン)

thisを意図通り扱うため、上記のようにcallを使う方法もある。けど、この場合、無名関数でattachするから、detachEventできないので要注意です。

(参考サイト)
JavaScript のイベントハンドラ - daily dayflower
JavaScript メモ / チップス attachEvent() と addEventListener() [ ARTEMIS ]