1.概要
HuTime内の多くのオブジェクトがマウス操作などのイベントを処理することができる。イベントの扱い方は、基本的に、DOM要素の場合と同じである。
2.イベントの種類
HuTimeで扱うイベントは、マウスイベントとHuTime独自のイベントに分けられ、イベント伝播などで若干の違いがある。
(1)マウスイベント
発火条件は、DOM要素のマウスイベントと同様で、パネルコレクション、パネル、レイヤなどの基本構造、および、レイヤ上の図形オブジェクトなどが発火元となる。ただし、イベントオブジェクトはDOM要素のものとは異なり、HuTime独自のマウスイベントオブジェクト(HuTime.MouseEvent)が用いられる。以下のマウスイベントが対象である。
click, dblclick, mouseup, mousedown, mousemove, mouseover, mouseout, wheel
(2)HuTime独自のイベント
表示範囲の変更やパネルの表示状態が変化したときに発火する。
- tmoved: t軸方向の表示範囲が変更された場合(移動および拡大・縮小)。
- tlengthchanged: t軸方向の幅(タテ表示では高さ)が変更された場合。
- vscrolled: v軸方向にタイルパネルが移動された場合。
- porderchanged: タイルパネルの順序が変更された場合。
- pvbreadthchanged: タイルパネルのv軸方向の高さ(タテ表示では幅)が変更された場合。
3.イベントの伝播
マウスイベントとHuTime独自のイベントでイベントの伝播の仕方が異なる。
(1)マウスイベント
canvas上に描画された図形などのマウス操作を捉えるため、いったん、パネルコレクションオブジェクトのcaptureElement(canvas要素)でマウスイベントを受け取る。DOMツリーから見た場合は、captureElementが発火元で、HuTime内の処理は同イベントのTarget Phaseとなる。イベントが発火すると、captureElementからHuTimeオブジェクトに処理が渡され、オブジェクトツリーを辿って、発火元のオブジェクトとイベントの種類を抽出する処理が行われる。次に、発火元のオブジェクトへ至るCapture Phase、発火元でのTarget Phase、さらに、発火元からのBubbling Phaseを経て、HuTimeオブジェクトに処理が返される。オブジェクトツリー内の処理が終了すると、HuTimeオブジェクトは処理をcaptureElementに返すが、意図しない動作を防止するため、それ以降のDOMツリーでのBubbling Phaseは抑止されている。
(2)HuTime独自のイベント
HuTime独自のイベントが発火すると、発火元からHuTimeオブジェクトに処理が渡される。以降は、発火元のオブジェクトへ至るCapture Phase、発火元でのTarget Phase、さらに、発火元からのBubbling Phaseを経て、HuTimeオブジェクトに処理が返され、処理が終了する。HuTime独自のイベントは、DOMツリーへは伝播しない。
4.ユーザ定義のイベント処理の追加
マウスイベントおよびHuTime独自のイベントは、アプリケーションルート、パネルコレクション、パネル、レイヤ、および、レイヤ上の図形オブジェクトにイベント処理(リスナ)をaddEventListenerメソッドにより追加できる。イベントタイプやリスナーの指定、および、イベントフェーズの指定方法は、DOM要素にユーザイベント処理を追加するaddEventListenerと同様である。
obj.addEventListener(type, handler [, useCapture])
イベント処理の追加。
- 返値
- なし。
- obj
- 型:HuTime, HuTime.ContainerBase, HuTime.OnLayerObjectBase
- イベントを定義するオブジェクト。
- type
- 型:文字列
- イベントの種類を示す文字列。
- handler
- 型:関数(function(ev))
- イベント処理を行う関数。引数evはイベントオブジェクト(型:HuTime.Event)
- useCapture
- 型:真偽値
- イベントのどのフェーズを利用するかを設定。trueの場合はキャプチャフェーズ、falseの場合はバブリングフェーズ。省略された場合は、false(バブリングフェーズ)が設定される。