javascript自定义事件的观察者模式写法和用法以及继承

html 复制代码
<html>
    <head>
        <meta http-equiv="Context-Type:text/html;charset=utf-8"/>
        <title>自定义事件之观察者模式</title>
        <script type="text/javascript" src="common.js"></script>
    </head>
    <body>
        <input type="button" name="btn" value="点击" id="mybtn"/>
        <script type="text/javascript">
        //继承关系函数
            function inherit(sub,sup)
            {
                var prototype=Object(sup.prototype);
                prototype.constructor=sub;
                sub.prototype=prototype;
            }
			//父类函数
            function EventTarget(){
                this.handlers={};
            }
            //父类函数的原型方法
            EventTarget.prototype={
            	//使用字面量对象的原型方法必须加上构造函数原自父类，不然字面量原型方法就继承于object对象
                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;
                       console.log(event);
                    }
                    if(this.handlers[event.type] instanceof Array)
                    {
                        var handlers=this.handlers[event.type];
                        //console.info(handlers);
                        for(var i=0;i<handlers.length;i++)
                        {
                            handlers[i](event);
                        }
                    }
                },
                //删除自定义事件函数
                removeHandler:function(type,handler)
                {
                    if(this.handlers[type] instanceof Array)
                    {
                        var handlers=this.handlers[type];
                        for(var i=0;i<handlers.length;i++)
                        {
                            if(handlers[i]===handler)
                            {
                                break;
                            }
                        }
                        handlers.splice(i,1);
                    }
                }
            };

            //子类
            function Person(name,age)
            {
                EventTarget.call(this);
                this.name=name;
                this.age=age;
            }
            //子类继承父类
            inherit(Person,EventTarget);
            //执行自定义事件函数
            Person.prototype.say=function(message)
            {
            	//type表示你自定义事件的种类，message表示触发后的信息
                this.fire({type:"message",message:message});
            }
			//执行自定义的事件的函数
            Person.prototype.data=function(event,str){
            //这里type同样表示自定义事件的种类，event表示传递过来的事件，data:str表示传递的数据
                this.fire({
                	//event这里表示从re()函数的btn事件中传递过来的点击事件
                    type:'data',x:event.clientX,y:event.clientY,data:str
                });
            };
            //getna事件，获取person的name\age
			 Person.prototype.getna=function(arr)
            {
                
                this.fire({type:'getna',getna:arr});
            }
            //一般事件信息处理函数
            function hm(event)
            {
                alert("message received: "+event.message);
            }
			//这里re(event)中的event表示从data事件中传递过来的event
			//处理点击事件带数据的函数
            function re(event)
            {
                var ss=event;
                btn.onclick=function(event){
                var event=EventUtil.getEvent(event);
                var target=EventUtil.getTarget(event);
                
                alert(event.x+":"+event.y);
                console.info(ss.data);
              }
            }
			//处理getna事件的函数
			function getnameage(event)
            {
                alert(event.getna);
            }
			//创建实例
            var person=new Person('Nicholas',23);
            //注册一般事件信息
            person.addHandler("message",hm);
            //注册点击事件，获取点击的坐标
            person.addHandler('data',re);
            //触发一般事件的信息
            person.say("Hi i am here");
           
            var btn=document.getElementById('mybtn');
            //触发带数据的点击事件
            person.data('','dfd');
            //先注册getna事件
            person.addHandler('getna',getnameage);
            //然后触发getna事件的函数
            person.getna([person.name,person.age]);
            
        </script>
    </body>
</html>