onMouseUpといったイベントハンドラが用意されています。onMouseUpの扱いなど、若干注意すべき点があります。0.7ではイベントハンドラが削除されました。0.7で変更されたイベント処理を理解しよう」で解説していますので、よろしければ合わせてご覧下さい。onMouseUpを使ったドラッグ&ドロップ単独でMouseMoveイベントを使うスマートフォンやタブレットのタッチイベントに対応させるまず、スマートフォンやタブレットのタッチイベントに対応させる方法を見ておきましょう。EaselJSには、タッチイベントを処理するTouchクラスが用意されており、簡単な記述だけでタッチイベントをマウスイベントと同様に扱うことができます。Touch.isSupported()は、ブラウザがタッチイベントをサポートしているかをBool値で返します。onMouseUpといったイベントハンドラで処理できるようになります。Touch.enable(_stage);}onClickイベントハンドラonClickイベントハンドラは、オブジェクト上でマウスがクリックされると呼び出され、引数でMouseEventオブジェクトを受け取ります。MouseEventオブジェクトは、typeにマウスイベントの種類、nativeEventにブラウザのネイティブMouseEventオブジェクト、stageXとstageYにイベントが発生したstage上の座標、targetにイベントハンドラが登録されたオブジェクトを持っています。イベントハンドラ内のthisは、targetと同じくイベントが登録されたオブジェクトとなります。下記の例では、stage中央の円形のShapeインスタンスにonClickイベントハンドラを登録し、クリックするとShapeインスタンスの色が変わるようにしています。JavaScriptコンソールでMouseEventオブジェクトのプロパティが出力されます。g.endFill();};SampleonDoubleClickイベントハンドラonDoubleClickイベントハンドラは、オブジェクト上でマウスがダブルクリックされると呼び出され、onClickと同様に引数でMouseEventオブジェクトを受け取ります。下記の例では、円形のShapeインスタンスがダブルクリックされた際にトゥイーンを実行するようにしています。Ease.elasticOut);};SampleonMouseOverとonMouseOutを有効にするenableMouseOver()onMouseOverとonMouseOutを使用するには、まずStageインスタンスのenableMouseOver()をコールする必要があります。enableMouseOver()の引数で、マウスとオブジェクトの衝突判定を1秒間に何回行うかを指定します。引数を省略した場合は20、指定できる最大値は50となります。0を指定した場合は、onMouseOverとonMouseOutは使用できなくなります。下記の例では、enableMouseOver(30)としているため、1秒間に30回、マウスとShapeインスタンスの衝突判定が行われます。onMouseOverイベントハンドラでは、ColorFilterを使ってShapeインスタンスの色を変更しています。this.updateCache();};Sampleマウスカーソルをハンドカーソルに変更するクリックできるオブジェクトは、マウスオーバーした際にマウスカーソルをハンドカーソルに変更した方がユーザーに親切です。リファレンスを見る限り、現在のCreateJSではFlashのbuttonModeのようなプロパティは用意されていないようです。そこで、下記の例ではマウスオーバー時にcanvas要素自体のスタイルシートを変更することで、ハンドカーソルに変更しています。onMouseOverでcanvas.style.cursorに"pointer"を指定し、onMouseOutで"default"に戻しています。onMouseUpイベントハンドラを使用します。対象となるオブジェクトにonPressイベントハンドラを設定します。onPressイベントハンドラは、オブジェクト上でマウスボタンが押された際に呼ばれ、引数でMouseEventオブジェクトを受け取ります。次にonPressで受け取ったMouseEventオブジェクトに対して、onMouseMoveとonMouseUpのイベントハンドラを設定し、マウスの移動とドラッグの終了を検知します。onMouseMoveとonMouseUpは、ドラッグする表示オブジェクトではなく、onPressで受け取ったMouseEventオブジェクトに設定する点に注意しましょう。onMouseMoveとonMouseUpでは、イベントハンドラ内のthis参照にも注意する必要があります。下記は、円形のShapeインスタンスをドラッグ&ドロップする例です。onPressイベントハンドラ内のthisは、onPressで受け取ったMouseEventのtargetプロパティ(イベントハンドラが登録されたShapeインスタンス)となりますが、onMouseMoveとonMouseUpイベントハンドラ内のthisは、onPressで受け取ったMouseEventとなります。};};Sample単独でMouseMoveイベントを使う前述したように現在のEaselJSでは、onMouseMoveはonPressで受け取ったMouseEventオブジェクトにしか設定できないため、単独で使用することができません。JavaScriptネイティブのmousemoveイベントをcanvas要素に登録することで、単独でも使用することができます。下記の例では、canvas要素に対してmousemoveイベントのリスナーを追加しています。pageYプロパティは、ページ左上からの座標なので、この値からcanvas要素の座標を引くことでStage上の座標に変換することができます。サンプルでは、矢印のShapeインスタンスをマウス座標に向けるようにしています。