イベント

HTML5には、HTML要素に対して機能するイベントメカニズムがありますが、コントロールやコレクションなどの任意のオブジェクトにイベントを追加することはできません。

このため、Wijmoは、すべてのWijmoクラスにあらゆるイベントを実装するために使用できるEventクラスを定義しています。WijmoイベントとHTMLイベントの主な相違点は次のとおりです。

Wijmoイベントは、（HTML要素だけでなく）任意のクラスで宣言できます。
Wijmoイベントはルーティング（キャプチャとバブル）を含まないので、HTMLイベントより軽量です。Wijmoイベントは、それを宣言したオブジェクトのみをターゲットにします。
Wijmoイベントハンドラの追加または削除は、（HTMLイベントで使用されるaddEventListenerメソッドまたはremoveEventListnerメソッドではなく）イベントのaddHandlerメソッドまたはremoveHandlerメソッドを呼び出して行うことができます。
Wijmoのイベントハンドラはそれぞれ、（a）イベントの送信元と（b）イベント引数の2つのパラメータを受け取ります。
Wijmoイベント"XYZ"は、対応するメソッド"onXYZ"によって生成されます。ただし、派生クラスでオーバーライドして、ハンドラをアタッチせずにイベントを処理したり、イベントをカスタマイズしたり、抑止することもできます。

Wijmoイベントは、HTMLイベントに代わるものではありません。通常、アプリケーションでは両方を使用します。コントロールのhostElementまたはコントロールテンプレート内で定義される要素をターゲットにするマウス操作やキーボード操作を処理するには、HTMLイベントを使用します。DOMに直接関連しないコントロール固有のイベントを処理するには、Wijmoイベントを使用します。たとえば、valueChangedやrowAddedなどです。

以下の例は、JavaScriptを使用して、InputNumberコントロールのHTMLイベントとWijmoイベントにハンドラを追加する方法を示します。

import { InputNumber } from '@mescius/wijmo.input';

// コントロールを作成します
let ctl = new InputNumber('#inputNumber');

// Wijmoイベントハンドラをアタッチします
ctl.valueChanged.addHandler(function (s, e) {
    console.log('the value has changed to ' + s.value);
});

// HTMLイベントハンドラをアタッチします
ctl.addEventListener(ctl.hostElement, 'keypress', function(e) {
    console.log('you pressed ' + e.charCode);
});

上の例は、プレーンJavaScriptを使用する構文を示します。Angular、React、Vueなどのフレームワークを使用するアプリケーションでは、それぞれのフレームワークで規定された構文を使用する必要があります。

たとえば、AngularJSでは、次のようにしてvalueChangedイベントにハンドラをアタッチします。

<wj-input-number
    value-changed="myValueChangedEventHander(s, e)">...

Angularでは、代わりに次のようにしてイベントハンドラをアタッチします。

<wj-input-number #theControl
    (value-changed)="myValueChangedEventHander(theControl, $event)">...