WWACustomEvents - WWAWing/WWAWing GitHub Wiki

WWA Custom Events は、WWA Wing と連携したWebアプリケーションを構築するのに便利な機能です。JavaScriptで、特定の種類のイベントが発生した時に実行する処理を記述することができます。

まず、WWA Wingが設置されているWebページで、ID「wwa-wrapper」のDOM要素を取得してください。この解説では、定数 wwa に代入することとします。

const wwa = document.getElementById("wwa-wrapper");

or

const wwa = document.querySelector("#wwa-wrapper");

wwa.addEventListener を呼び出し、イベントが実行された時に呼び出したい関数を登録します。ここでは、Quick Save が完了された時に実行される関数を定義してみます。 Quick Save の完了を表すイベント名は wwa_quicksave です、

// トランスパイルせずに IE11でも利用できるようにするため、function～の関数定義を用いましたが、
// IE11を非対応にしたり、トランスパイルしたりするなら、アロー関数でも大丈夫です。
wwa.addEventListener("wwa_quicksave", function (event) {
  console.log(event.detail);
}); 

定義した関数の引数で受け取ったオブジェクトのプロパティ detail を参照することにより、イベント発生とともに送信されたデータを確認することができます。（detail というプロパティ名は各イベント共通です。)