未解放のイベントリスナの例

  1. DevToolsのTimelineパネルで、Memoryにチェックをして、計測を開始します。

  2. 「Create Buttons」ボタンをクリック、もしくは以下のスクリプトをDevToolsのコンソールで実行します。

    
    for (var i = 0; i < 100;i++) {
      var button = document.createElement('button');
      button.textContent = 'Button';
      button.className = 'foo';
      button.addEventListener('click', function() {
        console.log('Button Click Handler');
      });
    }
            
  3. 「Delete Buttons」ボタンをクリック、もしくは以下のスクリプトをDevToolsのコンソールで実行します。

    
    var buttons = document.querySelectorAll('button.foo');
    for (var i = 0; i < buttons.length;i++) {
      var button = buttons[i];
      button.remove();
    }
            
  4. 計測を終了し、MEMORYのセクションのListenersの値が減っていないことを確認します。