EventPerk

継承:Perk セクション名:event 優先度:210

EventPerkはイベントハンドラの追加やイベントのトリガーなど、イベント関連の機能を付与します。

各ユニット固有の設定は“event”セクションに記述します。

{
    "event": {
        "events": {
            <elementName>: {
                "handlers": {
                    <eventName>: { または [{
                        "handler": Function|String,
                        "listerOptions": Object,
                        "options": Object,
                        "order": Number,
                    } または }, ...]
                    ...
                },
                "rootNode": String,
            },
            ...
        }
    }
}

イベントハンドラの設定には短縮系があります。イベントハンドラにオプションが不要な場合は、こちらを使用できます。

{
    "event": {
        "events": {
            <elementName>: {
                "handlers": {
                    <eventName>: Function|String または [Function|String, ...],
                    ...
                },
                "rootNode": String,
            },
            ...
        }
    }
}

型:String

要素名を指定します。rootNodeオプションを指定しない場合、この値を要素のIDとみなします。この値が“this”の場合ユニット自身を表します。rootNodeオプションに指定がある場合は、この値は特に意味は持ちません(ただし一意な値にしてください)。

型:String

イベントハンドラを登録したいイベント名を指定します。有効なイベント名はBitsmistJSイベント、もしくはJavascriptの標準のイベントです。

型:String|Function

このイベントに対するイベントハンドラを指定します。イベントハンドラは文字列またはFunctionオブジェクトを指定します。文字列を指定した場合は、ユニットのメソッド名と判断されます。この場合、ユニットのメソッドの中から同名の関数がセットされます。Functionオブジェクトを指定した場合はイベントハンドラそのもの(Functionオブジェクト)と判断されます。いずれの場合もハンドラはユニットにbindされ、“this”はユニット自身を指すようになります(addスキルの引数で指定されてない場合)。

型:Object

JavascriptネイティブのaddEventListener()関数に渡すオプションを指定します。

型:Object

イベントハンドラに渡すオプションのオブジェクトを指定します。イベントハンドラの引数“ex”からアクセスできます。

型:Number Default:0

同じ要素の同じイベントに、複数のイベントハンドラがある場合の実行順を制御します。数値が高いほど先に実行されます。指定がない場合は0です。

型:String

イベントハンドラをセットする対象の要素のノードを表す、セレクター文字列です。自身の配下の要素のみが対応となります。複数の要素が該当する場合、全ての要素に対して同じイベントハンドラがセットされます。

ここでは様々な設定例を紹介します。省略形が使える場合は、省略形で記述しています。

どの要素に対してなのかを指定する例を紹介します。大きく分けると、ユニット自身なのか、ユニット内部の要素なのか、に別れます。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": this.onDoRefresh
            }
        }
    }
}

<elementName>が“this”なので、ユニット自身に対してセットします。

“rootNode”に指定することもできます。その場合<elementName>“myself”は、特に意味を持ちません。

"event": {
    "events": {
        "myself": {
            "rootNode": "this"
            "handlers": {
                "doRefresh": this.onDoRefresh
            }
        }
    }
}

要素を指定する場合、要素がIDを持っていれば<elementName>にそれを指定することができます。

"event": {
    "events": {
        "btn-menu": {
            "handlers": {
                "click": this.onBtnMenu_Click
            }
        }
    }
}

上記の場合、btn-menuというIDを持つ要素に、イベントハンドラがセットされます。

“rootNode”に指定する場合、querySelectorAll()に指定可能な文字列を使用できます。

"event": {
    "events": {
        "btn-menu": {
            "rootNode": ".buttons"
            "handlers": {
                "click": this.onBtnMenu_Click
            }
        }
    }
}

その結果、複数の要素になっても構いません。全ての要素に同じイベントハンドラがセットされます。この場合も、<elementName>“btn-menu”は、特に意味を持ちません。

次にイベントハンドラの指定方法の例を示します。

イベントハンドラとして、関数オブジェクトか文字列を指定することができます。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": this.onDoRefresh
            }
        }
    }
}

“doRefresh”イベントに対して、Functionオブジェクトを指定しています。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": "onDoRefresh"
            }
        }
    }
}

この例では、“doRefresh”イベントに対して、文字列を指定しています。この場合はこのユニットのメソッドの中から同名の関数がセットされます。つまりthis.onDoRefresh()メソッドがセットされます。

一つのイベントに対して、複数のイベントハンドラを指定することができます。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": ["onDoRefresh1", this.onDoRefresh2]
            }
        }
    }
}

配列を使用することで、1つのイベントに2つのイベントハンドラを指定しています。文字列とFunctionオブジェクトを組み合わせても構いません。

イベントハンドラにオプションを指定することができます。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": {
                    "handler": this.onDoRefresh,
                    "options": {"value":"1"}
                 }
            }
        }
    }
}

この例ではイベントハンドラと同時にオプションも指定しています。このオプションは以下のように、イベントハンドラのexパラメータからアクセス可能です。

onDoRefresh(sender, e, ex)
{
    console.log("value =", ex.value); // console displays "value = 1"
}

次の例では、複数のハンドラを指定しています。それぞれのハンドラに別のオプションを渡しています。

"event": {
    "events": {
        "this": {
            "handlers": {
                "doRefresh": [
                    {
                        "handler": this.onDoRefresh1,
                        "options": {"value":"1"}
                     },
                    {
                        "handler": "onDoRefresh2",
                        "options": {"value":"2"}
                     },
                 ]
            }
        }
    }
}

“event.events”セクションから設定を読み込み、イベントハンドラを追加します。

• event.events

“event.events”セクションから設定を読み込み、ユニット内の各要素に対するイベントハンドラのみをセットされます。ユニット自身のイベントは、このタイミングではインストールされません。

• event.events

型:Undefined 対象:Unit

引数で指定されたHTML要素に対し、指定されたイベントのイベントハンドラをセットします。

なし。

型:Undefined 対象:Unit

引数で指定された名前の要素に対し、イベントハンドラを設定します。addスキルと違い、複数のイベントに対してイベントハンドラを一度にセットすることも可能です。それぞれのイベントに対し、addスキルを使用してセットします。

なし。

• event.events.<elementName>

型:Undefined 対象:Unit

HTML要素からイベントハンドラを取り除きます。

なし。

型:Undefined 対象:Unit

引数で指定された名前の要素に対し、設定に従ってイベントハンドラを除去します。initスキルの逆の処理を行います。

なし。

• event.events.<elementName>

型:Undefined 対象:Unit

イベントを発生させますが、triggerと違い、一つ前のハンドラの終了を待たずに次のハンドラを呼び出します。その他の説明に関してはtriggerを参照してください。

型:Undefined 対象:Unit

イベントを発生させます。同じ要素の同じイベントに複数のイベントハンドラがセットされている場合、前のイベントハンドラの実行が完了してから、次のイベントハンドラを呼び出します。

なし。