みかづきブログ その3

3ヶ月つづけてみました。

dispatchEventをつかってイベントを発火させる

jQueryのtrigger的なことをJavaScriptでできないものかともろもろ調べていたらdispatchEventにたどり着きました。
引数がイベント名(String)ではなく、イベントオブジェクト(Object)なところがtriggerと違います。

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var btn = doc.getElementById("btn");
    
    btn.addEventListener("click", function(evt) {
        alert("CLICK!");
    }, false);

    btn.dispatchEvent(new Event("click"));

})(this, document);

DEMO



引数を渡したい場合は、CustomEventをつかって、第2引数に渡すオブジェクトのdetailキーの値として渡しましょう。


JavaScript

(function(win, doc) {
    
    "use strict";
    
    var btn = doc.getElementById("btn");
    
    btn.addEventListener("fire", function(evt) {
        alert(evt.detail.selif);
    }, false);

    btn.dispatchEvent(new CustomEvent("fire", {
        detail: {
            selif: "FIRE!"
        }
    }));

})(this, document);

DEMO



これでtrigger的につかえますね。