やっぱりIEはリークする - Emotion Wave Tech Blog

f:id:devew:20191227115434j:plain

よくIEは開発者泣かせといいますが、この前IEが原因？でまたリークしてしまいました。

なので内容を少し書いておきます。

FlashでActionScriptを使ったことがある人は馴染みがあるかもしれませんが、 Javascriptでもカスタムイベント（独自イベント）を作成できることを知っていますか。これにより任意のタイミングでイベントを発火したり、独自で定義したイベントを使用することが可能になります。

1.カスタムイベントの発火までの流れ

イベントの作成
イベントの初期化
イベントの発火

2.サンプルコード

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" type="text/css" />

  </head>

  <body>

    <input type="button" value="カスタムイベント" id="custom">

    <script>

      var elm = document.getElementById("custom");


      // イベントの登録
      elm.addEventListener("custom_click", function() {
        alert("call custom event!!");
      }, false);

      // クリック時にカスタムイベントを発火
      elm.addEventListener("click", function() {
        // カスタムイベントの作成
        var customEvent = document.createEvent("HTMLEvents");
        // カスタムイベントの初期化
        customEvent.initEvent("custom_click", true, false);
        // カスタムイベントの発火
        this.dispatchEvent(customEvent);
      }, false);

    </script>

  </body>

</html>

※IE9以降ではaddEventListenerが使えるが、それ以前はattachEventしか使えません。

3.リーク

IE6,7,8ではこれまでいろいろなメモリリークや循環参照などの問題がたくさんありました。ここで注意しないといけないのがIE9,10で、addEventListenerするときにIEがサポートしているイベントに対して定義することです。

最近はスマートデバイス用のイベントがFF,Chrome,Safari等でサポートされていますが、IEではtouch系（touchstart,touchend,touchmove等）のイベントはサポートされていません。そのかわり、IE10以降でMsPointer系のIE独自イベントがサポートされています。

もし、未サポートイベントに対して定義すると、dispatchEventが認識しないのかは不明ですが、暴走して無限ループに陥りオーバーフローしてしまいます。なので、クロスブラウザで開発を行う場合は未サポートイベントは定義しないように注意。。