ポインティングデバイス・イベントの伝播ツリー

  • html タグは文書構造の順番に並ぶ.だいたいそれが、表示上の順番になる.
  • Web アプリの場合 html タグは文書構造の順番というより、表示上の順番に並べるのが都合が良い.
    • 表示上の順番をいじくる z-index は 古めのブラウザで問題が出たり実装差が怪しい.そこで、Web アプリの UI を作る場合、文書構造は一旦忘れ、表示上の順番で html 要素を書いていく.
    • 文書構造を脇に置いた場合ユニバーサルなアクセスへの影響を把握できていない.WAI-ARIA について勉強してかなくちゃ、、、http://terkel.jp/archives/2010/08/beginning-html5-and-wai-aria/
  • そして、ポインティングデバイス・イベントは、html タグの順番で伝播する.

ブラウザがネイティブに備えているポインティングデバイスイベントの問題

  • 必ずしも イベント伝播を html タグ順(表示順)で行いたいわけではない.しかし、概ね表示順と一致するので、あんまり問題にならなかった.
    • ユーザーは通常画面の上面にあるものから触れると予期し、下面に隠された要素から触れることを期待しない.
    • pettanR のパネルエディターは、リピート画像をジャンプして(リピート画像のハンドル部分は触れる)その下にあるパネル要素を触りたい、といったケースが出てくる.
  • ある表示領域にイベントを付与したい場合、(通常は) html 要素を作る必要がある.

イベント伝播ツリー

  • html ツリー(表示ツリー)の他に イベント伝播ツリーが必要.これらは、だいたい一致するので、html ツリーを使いまわしても問題ないが pettanR では異なるケースが出てくる.
  • イベント伝播ツリーのリスナーターゲット要素として明示されたものにしか イベント が伝播しないので高速化の可能性がでてくる?

イベント伝播ツリー・メリット

  • 上記のほかに、html 要素を作らなくても ある座標領域にイベントを付与できる.

デメリット

  • 表示要素のサイズ・位置・非表示といった変化を、イベント伝播ツリーにも教える必要がある.

まとめ・Tree の種類

  • html ツリー
  • 表示上のツリー(最終的にどの要素が画面の上面に表示されるか?)
  • イベント伝播ツリー