気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【メモ】パーフェクトJavaScript-part03

イベント処理設定

イベントハンドラ

<script>
function stop(event) {
    alert('stop');
    // 戻り値としてfalseを返却するとイベントのデフォルト動作をキャンセルする
    return false;
}
</script>

<a id="foo" href="http://hoge.com/" onclick="return stop();">hoge</a>

イベントリスナ

  • IE8以前では利用不可
    • attachEvent()を利用する
<html>
  <body>
    <div id="foo">
        <button id="bar">sample</div>
    </div>

  <script>
    var foo = document.getElementById('foo');
    foo.addEventListener('click', function(){
        console.log('foo-click');
    }, false);
  </script>
  </body>

</html>

キャプチャリングとバブリング

  • キャプチャリングフェーズ
    • Windowオブジェクトからはじまり、DOMツリーをたどってイベントが伝播する。
      上記HTMLで表すと以下のとおり
      • Window
      • Document
      • html
      • body
      • div
      • button
    • イベントターゲットに登録されているイベントリスナが実行されるフェーズ
    • HTMLタグ属性としてイベントハンドラが設定されている場合や、 オブジェクトのプロパティとしてイベントハンドラが設定されている場合は ここで実行
  • バブリングフェーズ
    • イベントターゲットからDOMツリーを上にたどっていくフェーズ
    • 最後には、Windowオブジェクトまでイベントが伝播される
    • ツリー上のノードに登録されたイベントリスナがこのタイミングで実行される
    • ただし、focusイベントはバブリングしない
      • その要素だけで必要なイベントであり、イベントを伝播させても意味がない