Javascript 自定义事件 (custom event)

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" });

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。