Javascriptカスタムイベント(custom event)

5272 ワード

Javascriptではカスタムイベントがよく使われます.簡単なカスタムイベントを作成するにはどうすればいいですか?カスタムイベントを作成する前に、イベントに関することを考慮する必要があります.たとえばclickイベントでは、まずclickイベント(buttonにclickイベントをバインド)を登録し、その後、このイベントをトリガーすることができ、最後にイベントが不要な場合にイベントを削除することができます.
JQueryの方法でカスタムイベントを実装できます.次の例を参照してください.
    <div id="myDiv">myDiv</div>

    <script type="text/javascript">     

        $(function () {

            $("#myDiv").bind("myClickEvent", function () { //bind myClickEvent

                alert("This is my click event.");

            });

            $("#myDiv").trigger("myClickEvent"); //trigger myClickEvent

        $("#myDiv").unbind("myClickEvent");//remove myClickEvent         $("#myDiv").trigger("myClickEvent");
        });

    </script>

上記の例では、最も簡単なカスタムイベント:myClickEventを作成し、JQueryのtrigger()メソッドを使用してトリガーしました.最後に$を使用します.unbind()はイベントを除去し、イベントをトリガーしても効果はありません.
上記の例では、カスタムイベントを自分で実現する方法を考えているかもしれません.jQueryの方法を使わずに、自分でオリジナルのjavascriptで自分で一つの方法を定義すると、かっこいいのではないでしょうか..
     function EventTarget() {

            this.handlers = {};

        }

        EventTarget.prototype = {

            constructor: EventTarget,

            addHandler: function (type, handler) {

                if (typeof this.handlers[type] == "undefined") {

                    this.handlers[type] = [];

                }

                this.handlers[type].push(handler);

            },

            fire: function (event) {

                if (!event.target) {

                    event.target=this;

                }

                if (this.handlers[event.type] instanceof Array) {

                    var handlers = this.handlers[event.type];

                    for (var i = 0, len = handlers.length; i < len; i++) {

                        handlers[i](event);

                    }

                }

            },

            remvoeHandler: function (type, handler) {

                if (this.handlers[type] instanceof Array) {

                    var handlers = this.handlers[type];

                    for (var i = 0, len = handlers.length; i < len; i++) {

                        if (handlers[i] === handler) {

                            break;

                        }

                    }

                    handlers.splice(i,1);

                }

            }

        }

        function myClickFun() {

            alert("This is my custom event.");

        }

        var target = new EventTarget();

        target.addHandler("myClickEvent", myClickFun);

        target.fire({ type: "myClickEvent" });

        target.remvoeHandler("myClickEvent",myClickFun);

        target.fire({ type: "myClickEvent" });