要素にイベントハンドラを設定するメソッド。

addEventListenerの第三引数（useCapture）はリスナが実行されるタイミングを指定する引数である。useCaptureがtrueのリスナはfalseのリスナより先に実行される。

サンプル

以下のようなHTMLがあったとする

  <div id="L1">
  <div id="L2">
  <div id="L3">
  <p>ここをクリック</p>
  </div>
  </div>
  </div>

これに以下のようにイベントを設定する

document.getElementById("L3").addEventListener("click", function(e){alert("L3 capture");}, true);
document.getElementById("L2").addEventListener("click", function(e){alert("L2 capture");}, true);	
document.getElementById("L1").addEventListener("click", function(e){alert("L1 capture");}, true);
document.getElementById("L3").addEventListener("click", function(e){alert("L3 bubble");}, false);
document.getElementById("L2").addEventListener("click", function(e){alert("L2 bubble");}, false);
document.getElementById("L1").addEventListener("click", function(e){alert("L1 bubble");}, false);

p要素（“ここをクリック”の要素）でclickイベントが発生すると、まずイベントはまずHTMLのDOMツリーの上側から下側に伝播する。

　document → html → body → div#L1 → div#L2 → div#L3 → p

この段階をキャプチャフェーズと言う。イベントを受け取った要素はuseCaptureがtureとなっているリスナを実行する。イベントがClickターゲットのノード（p要素）まで伝わるとイベントが逆に伝わる。

　p → div#L3 → div#L2 → div#L1 → body → html → document

この段階をバブリングフェーズと呼ぶ。イベントを受け取った要素はuseCaptureがfalseとなっているリスナを起動する。よってアラートは以下の順番で表示される。

L1 capture
L2 capture
L3 capture
L3 bubble
L2 bubble
L1 bubble

なお、リスナで event#stopPropagation() というメソッドを呼ぶとイベント伝播がそこで停止する。

IEにはキャプチャフェーズは存在しないため、互換性を維持するためにはuseCaptureはfalseにしておくのがよい。jQuery等のライブラリでも互換性のためバブリングフェーズで実行されるようだ。