【JavaScript高级程序设计】26、自定义事件

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>自定义事件</title>
</head>
<body>
    <script type="text/javascript">
        
        //自定义事件处理事件
        function EventTarget()
        {
            this.handlers = {};
        }

        //给自定义事件添加，删除，执行事件
        EventTarget.prototype = {
            //添加事件
            addHandler : function(type, handler){
                //判断是否包含了这类事件的列表
                //使用typeof可以来判断变量的类型，类型有object, string, number, boolean,function, undefined。
                if(typeof this.handlers[type] == "undefined")
                {
                    //如果没有这个事件，那个就在数组中添加一个链表
                    this.handlers[type] = [];
                }

                //当有了这个数组然后把事件添加进去
                this.handlers[type].push(handler);
            },
            //执行事件
            fire : function(event){
                if(!event.target)
                {
                    //看是否有target这个属性，这个属性是返回事件的目标节点（触发该事件的节点）
                    event.target = this;
                }
                //吧这个事件的链全部执行
                if(this.handlers[event.type] instanceof Array)
                {
                    //取出事件数组
                    var handlerss = this.handlers[event.type];
                    //执行所有的事件
                    for(var i = 0, len = handlerss.length; i < len; ++i)
                    {
                        handlerss[i](event);
                    }
                }
            },
            //删除事件
            removeHandler : function(type, handler){
                //还是判断是否已经有这个数组
                if(this.handlers[type] instanceof Array)
                {
                    //如果有，遍历这个数组，找到我们要删除的事件
                    var i = 0;
                    var handlerss = this.handlers[type];
                    for(var len = handlerss.length; i < len; ++i)
                    {
                        if(handlerss[i] == handler)
                        {
                            break;
                        }
                    }
                    //删除这个事件
                    handlerss.splice(i, 1);
                }
            }
        };

        //创建一个事件函数
        function handlerMessage(event)
        {
            alert("这是一个自定义事件:" + event.message);
        }

        //创建一个对象
        var eventObject = new EventTarget();

        //添加事件
        eventObject.addHandler("message", handlerMessage);

        //执行事件
        eventObject.fire({type : "message", message : "信息事件"});

        //删除事件
        eventObject.removeHandler("message", handlerMessage);
        //再次执行
        eventObject.fire({type : "message", message : "信息事件222"});
    </script>
</body>
</html>

 

执行结果：