Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

イベントを発生させることをイベント発火、またはイベントディスパッチといいます。

このイベントディスパッチによって発生したイベントに反応して処理を行う仕組みを「イベントリスナー」といいます。イベントリスナーはイベント発生直後に、登録されているハンドラ（コールバック関数など）を呼び出します。

この仕組みは次のDOMイベント、Extイベント、カスタムイベントのいずれにおいても、同じイベント操作（イベントハンドリング）のパターンを利用することができます。

よって、イベントの種類は違っても、イベント操作の仕組みは全て同じ記述方法でプログラミングすることが可能となります。

イベントには、いくつかの種類が存在します。

DOMイベント

DOMイベントとは、DOMノードが発火する様々なイベントのことを指します。よく使用されるイベントは次の通りです。

• mousedown
• mouseover
• click
• select
• blur
• focus
• change

イベントは、これ以外にもたくさん存在します。その他DOMイベントについては、W3Cのサイト（http://www.w3.org/TR/DOM-Level-2-Events/events.html）で確認してください。

Ext JSの内部では、これらDOMイベントはExt.EventObjectによってラッピングされた上で取り扱われます。Ext.EventObjectは、ブラウザが発行するイベントオブジェクトのラッピングだけではなく、クロスブラウザ対応された共通のAPIを提供します。これによって、統一されたイベント情報を取り扱うことが可能になります。

また、DOMイベントのイベントリスナーに登録されたハンドラの引数は、次の２つとなります

• e : Ext.EventObject
• target : HtmlElement

このように共通化された引数のことをメソッドシグネチャといいます。

では、DIVタグのclickイベントを操作してみたいと思います。idにfooを持つDIVタグを用意し、それをクリックします。

Ext.fly( 'foo' ).on( 'click', function( e, target ){
    console.log( e );
    console.log( target );
});

EXTイベント

DOMノードによるイベントではなく、Ext JSが発生させるイベントのことを指します。このExtイベントは、OBSERVABLEパターンというデザインパターンを用いて実装されています。「Observable」オブジェクトは、任意の数の「Observer」オブジェクトに対し、発生したイベントを通知することができます。

カスタムイベント

Ext.util.Observableクラスを継承することでObservableなクラスを作成することができます。さらに、イベント関係のメソッドはExt.util.Observableクラスに実装されていることから、継承によってユーザが自由にイベント発火、イベントリスナー登録、イベント操作を行うことが可能になります。また、キャンセル可能なイベントを作成することも可能です。

イベント登録

まず、イベントを使用するためにイベントを定義する必要があります。この操作をイベント登録といいます。イベント登録は、Ext.util.ObservableクラスのaddEventsメソッドを使用します。ここではイベントを登録することによって定義するだけであって、イベント後の動作の登録は行いません。

イベントリスナー登録

定義しただけでは何も起こらないので、イベント発生後のハンドラの登録を行います。イベントリスナー登録は、Ext.util.ObservableクラスのaddListenerメソッド、またはonメソッドを使用します。

イベント発火

イベントが発火しないことには、イベントリスナーで登録した動作が実行されません。登録されたイベントの発火は、Ext.util.ObservableクラスのfireEventメソッドを使用します。

イベントリスナー削除

用が済んだイベントは削除することもできます。イベントリスナー削除は、Ext.util.ObservableクラスのremoveListenerメソッド、またはunメソッドを使用します。

ここではExt.util.Observableを継承したクラスを作成して、イベント登録、イベント発火、イベントリスナー登録（イベント操作）を行います。

// Ext.util.Observableを継承したクラス定義
MyCls = Ext.extend( Ext.util.Observable, {
    // コンストラクタ
    constructor : function() {
        // 'myevent1','myevent2'をイベント登録
        this.addEvents( 'myevent1', 'myevent2' );
    }
});
// MyClsをインスタンス化
var objMyCls = new MyCls();
// イベントリスナー登録
objMyCls.on( 'myevent1', function(){
    alert( 'myevent1用イベントハンドラA' );
});
objMyCls.on( 'myevent1', function(){
    alert( 'myevent1用イベントハンドラB' );
});
objMyCls.on( 'myevent2', function(){
    alert( 'myevent2用イベントハンドラA' );
});
// 'myevent1'をイベント発火
objMyCls.fireEvent( 'myevent1' );
// 'myevent2'をイベント発火
objMyCls.fireEvent( 'myevent2' );

コンストラクタでaddEventsを実行して、クラスの定義を行っています。「myevent1」「myevent2」を登録しています。

次に、クラスをインスタンス化し、クラスオブジェクトにイベントリスナー登録を行います。ここでは、onメソッドを利用して無名関数をイベントのハンドラとして登録しています。

リストのように、同じイベントに対してイベントリスナーを複数登録することが可能です。イベント発火時は、ここで登録した順番通りにハンドラが実行されます。

最後に、「myevent1」「myevent2」の順番でイベントを発火しています。

「myevent1」イベントが発火すると、登録されている2つのイベントハンドラがコールされ、実行されます。そのあとに「myevent2」が発火し、「myevent2」のイベントハンドラがコールされて実行し、終了します。

Ext JSのようなインタラクティブ性の高いアプリケーションを構築する中で、このObservableという仕組みは、基本中の基本であり、しかし、非常に重要です。実際にアプリケーションを構築する場合、ほとんどがExt.util.Observableを継承したExt.Componentクラスから派生したクラスの子クラスを作成することになります。