DOMのイベント・ハンドリング（メモ）

addEventListener

addEventListener(type, listener, useCapture)
イベントターゲットに、イベントリスナーを登録する
このメソッドに戻り値はない

removeEventListener

removeEventListener(type, listener, useCapture)
指定されたイベントリスナーを解除（削除）する
type, listener, useCaptureすべてが一致した
イベントリスナーだけを解除（削除）できる
このメソッドに戻り値はない

  <div id="box">クリックしてね</div>
  <script>
  window.onload = function() {
    var box = document.getElementById('box');

    if (box.addEventListener) {
      box.addEventListener('click', eventCatch, false);
      box.addEventListener('click', boxEffect, false);
    }
  };


  function eventCatch() {
    alert("クリックありがとう！");
    box.removeEventListener('click', eventCatch, false);
  }

  function boxEffect() {
    alert("んじゃぁ、色を変更するね！");
    box.style.color = 'red';
    box.removeEventListener('click', boxEffect, false);
  }
  </script>

このサンプルでは、

removeEventListenerメソッドに与える引数は

addEventListenerメソッドに与えた引数と

全く同じにする必要があるので

匿名（無名）関数を使うより、名前つき関数を使う方がよい

このサンプルを実行すると、２つのイベントリスナーとしてセットされた関数は

２つとも実行される

そして、これらのリスナーがイベントをとらえて、関数を実行すると

removeEventListenerメソッドによってリスナーが解除（削除）されるので

同じイベントが発生しても、二度と実行されることはない