イベント：非DOM要素(JavaScriptオブジェクト)でのイベントの使用

• イベントモジュール概要
• 使用方法
  • イベントを受信する側
  • イベントを通知する側
• DOM要素でのイベント発火との違い

イベントモジュール概要

hifive ver.1.3より、非DOM要素(JavaScriptオブジェクト)において、DOMのイベントモデルに似たイベントの通知・受信機能が追加されました。
これにより、あるオブジェクトの状態変化を、それを受信したい任意の複数のオブジェクトに対して通知する汎用な仕組みが提供されます。
なお、この機能は同じくver.1.3で導入されたクラスモジュールを使用して実装されています。そのため、イベントモジュールを使用するためにはクラスモジュールの書き方にならう必要があります。

使用方法

イベントを受信する側

1. イベントを通知するクラスは、addEventListener(type, listener)という関数を持っています。このメソッドを呼び出し、第1引数(type)に受信したいイベントの名前、第2引数にイベントが発火されたときに呼び出してほしい関数(リスナー)を渡してイベント受信を登録します。
2. イベント通知側のオブジェクトがイベントを発火させると、listenerで指定した関数が実行されます。関数の中で必要な処理を行います。
3. イベントの受信が不要になった場合は、（addEventListenerを呼び出した）インスタンスのremoveEventListener(type, listener)メソッドを呼び出します。第1引数と第2引数には、addEventListenerを呼び出した時と同じタイプ名、関数を渡します。

イベントを通知する側

1. イベントを発信したいクラス(クラスXとします)をh5.event.EventDispatcherクラスを継承したクラスとして作成します。（クラスの継承方法はクラスモジュールを参照）
2. EventDispatcherを継承したクラスはdispatchEvent(eventObject)というメソッドを持つので、イベントを発火したいタイミングでこのメソッドを呼び出します。また、引数には任意のパラメータを持ったJavaScriptオブジェクトを渡します。ただし、最低限 type という文字列型のプロパティを持つ必要があり、typeにはイベントの名前をセットします。なお、dispatchEventメソッドを呼ぶと、メソッド内部で引数のオブジェクトに自動的に targetプロパティが追加されます。targetプロパティにはdispatchEventメソッドを呼び出したオブジェクトインスタンスがセットされます。
3. dispatchEventメソッドの呼び出しにより、その瞬間に、typeで指定された名前のイベントに対して登録されている関数が順番に実行されます。

DOM要素でのイベント発火との違い

DOM要素のイベント、あるいはhifiveのコントローラのtrigger()メソッドによって発火されるイベントは「バブリング」します。しかし、このイベントモジュールを使用して発火したイベントはバブリングしません。従って、あるオブジェクトのイベントを受信したい場合は、必ずそのオブジェクト自身のaddEventListener()を呼んでイベントリスナー関数を登録しておく必要があります。