CreateJS

CreateJSのマウスイベントでのthis参照

引き続き野中さんの記事（EaselJSのマウスクリックとドラッグ&ドロップ）のコードを書いていて、イベントハンドラからthisの参照した時に、何を指すのかがわからなかったのでテストしてみました。

 上の記事で作ったShapeに対して・・・
function overHandler(eventObject) { 　  console.log("over++++++++++++++++");

console.log("this>>"+this);
console.log("eventObject>>"+eventObject);
console.log("eventObject.target>>"+eventObject.target);

 }
こんな感じで、各イベントハンドラでログを書き出してみた結果です。
onClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=click stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onDoubleClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=dblclick stageX=104 stageY=51)]
eventObject.target>>[Shape (name=null)]
onPress
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseMove
this>>[MouseEvent (type=mousedown stageX=110 stageY=55)]
eventObject>>[MouseEvent (type=mousemove stageX=503 stageY=253)]
eventObject.target>>[Shape (name=null)]
onMouseUp
this>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject>>[MouseEvent (type=mouseup stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseOver
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseover stageX=115 stageY=55)]
eventObject.target>>[Shape (name=null)]
onMouseOut
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseout stageX=119 stageY=66)]
eventObject.target>>[Shape (name=null)]

これらをまとめると・・・

  • onMouseMove,onMouseUpでは、thisは対となるMouseEvent（mousedown）を指す。
  • その他のマウスイベントでは、thisはshapeを指す。
ということのようです。
※easeljs:0.6.0で動作確認。
 
関連リンク