common.on

イベントハンドラを追加します。指定方法は以下の2種類です。 戻り値はundefinedです。

on(type, handler)

type: srting

イベント名。

handler: function

JavaScript関数。

on(edata, handler)

edata: object

イベントのパラメータ。

handler: function

JavaScript関数。

説明

イベントリスナを追加する一番簡単な方法は、イベントリスナにイベント名とハンドラを指定する方法です。 例えば、以下のように指定したLayoutがあるとします。(Grid、Toolbar等で使う場合も全く同じです)

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
        { type: 'preview', size: 200 }
    ]
});

イベントリスナは以下のように指定します。

w2ui['layout'].on('refresh', function (event) {
    console.log(event.target, event);
});

または、指定するイベントの終了時に実行することもできます。

w2ui['layout'].on('refresh:after', function (event) {
    console.log(event.target, event);
});

以下のように指定することもできます。

w2ui['layout'].on({ type : 'refresh' }, function (event) {
    console.log(event.target, event);
});

1つ目の方法はシンプルですが、2つ目、3つ目の方法は追加指定が可能です。 2つ目、3つ目の方法は、eventに任意のプロパティを指定することができます。 そしてイベントの引数としてイベントハンドラに渡すことができます。 eventオブジェクトは追加パラメータを指定可能です。 例えば、イベントハンドラの発生タイミングをイベントの前 or 後に指定することや、 onCompleteイベントをイベントの最後に呼び出すこともできます。

イベントオブジェクトのプロパティは以下の通りです。

event = {
    type        : '',         // イベント名 or "*"を指定すると全てのイベント
    execute     : 'before',   // イベントハンドラの実行タイミング。"before" or "after"
    target      : null,       // イベントのターゲット(イベントが発生するとターゲットがセットされます)
    onComplete  : null        // イベント処理後に実行する関数。function(event)
}

イベントの名前空間

イベントリスナを設定する際に、イベントに名前空間を指定することができます。

w2ui['layout'].on('render.myplugin', function (event) {
    console.log(event.target, event);
});
w2ui['layout'].on('refresh.myplugin', function (event) {
    console.log(event.target, event);
});

名前空間を使うことで、イベントリスナに登録した全てのイベントを指定することなく、簡単に削除することができます。

w2ui['layout'].off('.myplugin')   // 上記のrender.mypluginとrefresh.mypluginを削除します

イベント名

イベント名は、それぞれのw2uiオブジェクトのイベントページに記載しています。 それらのイベントをon()とoff()で指定するには、 プレフィックスの"on"を削除して、1文字目を小文字にしてください。 例えばonResizeイベントならresizeにします。w2grid:onColumnClickイベントならcolumnClickを指定してください。 全てのイベントを指定するには以下のように指定します。

w2ui['layout'].on('*', function (event) {
    console.log(event.type, event);
});

いくつかのw2uiオブジェクトには、共通のイベントがあります。(w2popup, w2field, w2utilityを除く全てのオブジェクトで利用可能です)

• onRender
• onRefresh
• onResize
• onDestroy

イベントハンドラ

任意のイベントが作動すると、該当のイベントハンドラはeventを引数として受け取ります。 この引数eventはイベントに関するデータを保持しています。

function handler(event) {
    // body
}

イベントを取り消すことも可能です。 より詳しい情報はutils:eventsを参照して下さい。