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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
相关阅读:
ubuntu 18.04 开机自启打开终端执行脚本
 英语单词: truncate；截断警告
 Java开发学习(四十五)----MyBatisPlus查询语句之映射匹配兼容性
 STL容器——priority_queue的模拟实现
 使用docker部署lnmp多站点
 JavaWeb相关
 对比学习的锚网络和自动生成标签
 业务级灾备架构设计
 python sorted 自带函数模块排序方法使用
 Kubernetes之Pod
原文地址：https://blog.csdn.net/cdcdhj/article/details/134236711