EventHandler

Namespace

EventHandler オブジェクトは、WebModule 名前空間以下に配置(WebModule.EventHandler)されています。

EventHandler.js を読み込む前に WebModule.publish = true; を行うと、 EventHandler オブジェクトを GLOBAL 名前空間以下に直接配置 できます。

API

new EventHandler

new EventHandler(types:EventTypeStringArray, target:TargetObject = null) は、EventHandler のインスタンスを生成します。

types には EventHandler で使用するイベントタイプの文字列を配列で指定します。

addEventListener を持つオブジェクトをターゲットに指定すると、addEventListener, removeEventListener, dispatchEvent を使用します。

function handleEvent(event) {
    console.log(event.type, JSON.stringify(event.detail));
    // -> type-a {"message":"Hello"}
}

var event = new EventHandler(["type-a", "type-b"]);

event.on("type-a", handleEvent);
event.fire("type-a", { message: "Hello" });

target に window を指定した例です。

function handleEvent(event) {
    console.log(event.type, JSON.stringify(event.detail));
    // -> load {"from":"script"}
    // -> load undefined
}

var event = new EventHandler(["load", "unload"], window);

event.on("load", handleEvent); // window.onload の発生で handleEvent が呼ばれます
event.fire("load", { from: "script" }); // 自分で呼ぶこともできます

EventHandler.prototype.on

EventHandler#on(type:EventTypeString, handler:Function):void は type と handler のペアを登録します。

全く同じ type と handler の組み合わせは複数登録できません、 (この動作は、DOM Lv3 addEventListener の仕様に合わせています)

function handleEvent(event) { console.log(event.type); } // 3回呼ばれそうですが、実際には1回しか呼ばれません

var event = new EventHandler(["load", "unload"], window);

event.on("load", handleEvent);
event.on("load", handleEvent);
event.on("load", handleEvent);

別々の handler を指定すると、期待通りの動作をします。

function handleEvent1(event) { console.log(event.type); } // 1回呼ばれます
function handleEvent2(event) { console.log(event.type); } // 1回呼ばれます
function handleEvent3(event) { console.log(event.type); } // 1回呼ばれます

var event = new EventHandler(["load", "unload"], window);

event.on("load", handleEvent1);
event.on("load", handleEvent2);
event.on("load", handleEvent3);

EventHandler.prototype.off

EventHandler#off(type:EventTypeString, handler:Function = null):void は type と handler のペアを削除します

handler を省略した場合は、type に登録されている全ての handler を全て削除します。

function handleEvent1() { task.pass(); }
function handleEvent2() { task.pass(); }

var event1 = new EventHandler(["load", "unload"], window);
var task  = new Task("wait for onload", 2, function() {
    event1.off("load");  // load イベントハンドラを全て削除
    event1.list("load"); // -> []
});

event1.on("load", handleEvent1);
event1.on("load", handleEvent2);

EventHandler.prototype.list

EventHandler#list(type:EventTypeString):FunctionArray は、EventHandler#on で 登録済みの handler の配列を返します。

function handleEvent() { }

var event = new EventHandler(["load", "unload"]);

event.on("load", handleEvent);
event.list("load"); // -> [handleEvent]

EventHandler.prototype.fire

EventHandler#fire(type:EventTypeString, detail:Any|Object = {}):this は、イベントを発行します。

detail を指定すると handler(event) の中で event.detail としてアクセスできます。

function handleEvent(event) {
    console.log(event.type, event.detail.foo);
    // -> click "bar"
}

var event = new EventHandler(["click"], document.body);

event.on("click", handleEvent);
event.fire("click", { foo: "bar" });

EventHandler.prototype.know

EventHandler#know(type:EventTypeString):Boolean は type が登録済みなら true を返します。

var event = new EventHandler(["load", "unload"]);

event.know("load"); // -> true

EventHandler.prototype.clear

EventHandler#clear():this は、登録済みの全てのイベントを削除します。