サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS NEXT: Event.set()メソッドでオブジェクトにプロパティをまとめて加える

ID: FN1404003 Technique: HTML5 and JavaScript Library: EaselJS NEXT

Event.set()メソッド
文法 Eventオブジェクト.set(properties)
概要

引数のオブジェクトに納められたプロパティすべてを、Eventオブジェクトのプロパティとして加える。

引数

properties − 参照するEventオブジェクトに加えるプロパティを納めたオブジェクト。

戻り値

参照されたEventオブジェクト。


説明

引数に受取ったオブジェクトからすべてのプロパティを取出して、参照するEventオブジェクトに与えます。複数のプロパティをひとつのオブジェクトに納めてEvent.set()メソッドに渡せば、Eventオブジェクトにまとめて加えられます。参照したEventオブジェクトを戻り値として返すので、さらに続けて別のメソッドが呼出せます。


以下のコード001は、カスタムイベント("customclick")のEventオブジェクト(customclick)にEvent.set()メソッドで複数のプロパティを定め、EventDispatcher.dispatchEvent()メソッドでリスナー関数(handler())に配信しています(第9〜11行目)。そして、リスナーは引数のEventオブジェクトから取出したプロパティを配列に納めて、window.alert()メソッドで警告ダイアログに示します(図001)。

なお、HTMLドキュメントのbody要素には、つぎのようにonload属性で呼出す関数とcanvas要素(id属性"myCanvas")が定められているものとします[*1]

<body onLoad="initialize()">
<canvas id="myCanvas" width="240" height="180"></canvas>
</body>

図001■カスタムEventオブジェクトから取出したプロパティ値を警告ダイアログが示す

コード001■Eventオブジェクトにプロパティを加える
  1. var stage;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   stage = new createjs.Stage(canvasElement);
  5.   stage.addEventListener("stagemousedown", test);
  6.   stage.addEventListener("customclick", handler);
  7. }
  8. function test(eventObject) {
  9.   var customclick = new createjs.Event("customclick");
  10.   customclick.set({
        scope: {name: "scope"},
        mouseX: eventObject.stageX,
        mouseY: eventObject.stageY
      });
  11.   stage.dispatchEvent(customclick);
  12. }
  13. function handler(eventObject) {
  14.   var properties = [
        eventObject.scope.name,
        eventObject.mouseX,
        eventObject.mouseY
      ];
  15.   console.log(properties);
  16.   alert(properties);
  17. }

[*1] 本稿執筆時には、まだライブラリJavaScriptファイルeaseljs-NEXT.min.jsにEventクラスファイルの更新が加えられていません。そこで、クラスファイルを別に読込んで試しました。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="createjs/events/Event.js"></script>


実装

Event.set()メソッドは、実質的につぎのように実装されています。

  1. Event.prototype.set = function(props) {
  2.   for (var n in props) {
  3.     this[n] = props[n];
  4.   }
  5.   return this;
  6. };


作成者: 野中文雄
作成日: 2014年4月23日


Copyright © 2001-2014 Fumio Nonaka.  All rights reserved.