Jinuss's blog
东流
2025-03-14
目录

事件Event实现原理

# 前言

Leaflet 事件模块是基于发布订阅模式实现的，它提供了一个事件中心，用于管理事件的订阅、发布和取消订阅。事件中心是一个全局对象，它的作用是将事件的订阅、发布和取消订阅集中到一个地方，方便管理和维护。

Leaflet的事件中心是在core模块中的Events.js中实现。

# 事件中心

事件中心是一个全局对象，它的作用是将事件的订阅、发布和取消订阅集中到一个地方，方便管理和维护。事件中心的实现原理是基于观察者模式，它使用一个对象来存储事件的订阅者和事件的处理函数。事件中心的实现代码如下：

export var Events = {
  on: function (types, fn, context) {
    if (typeof types == "object") {
      for (var type in types) {
        this._on(type, types[type], fn);
      }
    } else {
      types = Utils.splitWords(types);
      for (var i = 0, len = types.length; i < len; i++) {
        this._on(types[i], fn, context);
      }
    }
    return this;
  },
  off: function (types, fn, context) {
    if (!arguments.length) {
      delete this._events;
    } else if (typeof types === "object") {
      for (var type in types) {
        this._off(type, types[type], context);
      }
    } else {
      types = Utils.splitWords(types);
      var removeAll = arguments.length === 1;
      for (var i = 0, len = types.length; i < len; i++) {
        if (removeAll) {
          this._off(types[i]);
        } else {
          this._off(types[i], fn, context);
        }
      }
    }
  },
  _on: function (type, fn, context, _once) {
    if (typeof fn != "function") {
      console.warn("wrong listener type:" + typeof fn);
      return;
    }

    if (this._listens(type, fn, context) !== false) {
      return;
    }

    if (context === this) {
      context = undefined;
    }

    if (_once) {
      newListener.once = true;
    }

    this._events = this._events || {};
    this._events[type] = this._events[type] || [];
    this._events[type].push(newListener);
  },
  _off: function (type, fn, context) {
    var listeners, i, len;
    if (!this._events) {
      return;
    }
    listeners = this._events[type];
    if (!listeners) {
      return;
    }
    if (arguments.length === 1) {
      if (this._firingCount) {
        for (i = 0, len = listeners.length; i < len; i++) {
          listeners[i].fn = Util.falseFn;
        }
        delete this._events[type];
        return;
      }
    }
    if (typeof fn !== "functions") {
      console.warn("wrong listener type:" + typeof fn);
      return;
    }

    var index = this._listens(type, fn, context);
    if (index !== false) {
      var listener = listeners[index];
      if (this._firingCount) {
        listener.fn = Util.falseFn;
        this._events[type] = listeners = listeners.slice();
      }
      listeners.splice(index, 1);
    }
  },
  fire: function (type, data, propagate) {
    if (!this.listens(type, propagate)) {
      return this;
    }

    var event = Util.extend({}, data, {
      type: type,
      target: this,
      sourceTarget: (data && data.sourceTarget) || this,
    });

    if (this._events) {
      var listeners = this._events[type];
      if (listeners) {
        this._firingCount = this._firingCount + 1 || 1;
        for (var i = 0, len = listeners.length; i < len; i++) {
          var l = listeners[i];
          var fn = l.fn;
          if (l.once) {
            this._off(type, fn, l.context);
          }
          fn.call(l.ctx || this, event);
        }

        this._firingCount--;
      }
    }

    if (propagate) {
      this._propagateEvent(event);
    }

    return this;
  },

  listens: function (type, fn, context, propagate) {
    if (typeof type !== "string") {
      console.warn('"string" type argument expected');
    }

    var _fn = fn;
    if (typeof fn !== "function") {
      propagate == !!fn;
      _fn = undefined;
      context = undefined;
    }

    var listeners = this._events && this._events[type];
    if (listeners && listeners.length) {
      if (this._listens(type, _fn, context) !== false) {
        return true;
      }
    }

    if (propagate) {
       for(var id in this._eventParents){
          if(this._eventParents[id].listens(type,fn,context,propagate)){
             return true;
          }
       }
    }
  },
  _listens:function(type,fn,context){
    if(!this._events){
       return false;
    }
    var listeners=this._events[type]||[];
    if(!fn){
       return !!listeners.length;
    }
    if(context====this){
       context=undefined
    }

    for(var i=0,len=listeners.length;i<len;i++){
       if(listeners[i].fn===fn &&listeners[i].ctx===context){
          return i;
       }
    }
    return false;
  },
  once:function(types,fn,context){

   if(typeof types == 'object'){
    for(var type in types){
         this._on(type,types[type],fn,true);
    }
   }else{
    types=Utils.splitWords(types);
    for(var i=0,len=types.length;i<len;i++){
         this._on(types[i],fn,context,true);
    }
   }

   return this;
  },
  addEventParent:function(obj){
    this._eventParents=this._eventParents||{};
    this._eventParents[Util.stamp(obj)]=obj;
    return this
  },
  removeEventParent: function (obj) {
		if (this._eventParents) {
			delete this._eventParents[Util.stamp(obj)];
		}
		return this;
	},

	_propagateEvent: function (e) {
		for (var id in this._eventParents) {
			this._eventParents[id].fire(e.type, Util.extend({
				layer: e.target,
				propagatedFrom: e.target
			}, e), true);
		}
	}
};

Event.addEventListener=Events.on;

Events.removeEventListener=Events.clearAllEventListeners=Events.off;

Event.addOneTimeEventListener=Events.once;

Events.fireEvent =Event.fire

Event.hasEventListeners=Events.listens;

export var Evented=Class.extend(Events);
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

# 核心功能

Events.js实现了以下核心功能：

  • 事件监听：通过on方法监听事件
  • 事件移除：通过off方法移除事件监听
  • 事件触发：通过fire方法触发事件
  • 一次性事件:通过once方法监听一次性事件
  • 事件传播：通过fire方法的propagate参数控制事件是否传播，例如从图层传播到地图
  • 事件上下文:支持为事件监听器绑定上下文(context)
  • 事件检查:通过listens方法检查是否有事件监听器

# 主要方法

  1. on方法

  • 功能:监听一个或多个事件.

  • 参数:

    • types:事件类型(可以是字符串或对象).
    • fn:事件处理函数.
    • context:事件处理函数的上下文(即this指向).

  • 逻辑

    • 如果types是对象,则遍历对象的属性,并调用_on方法.
    • 如果types是字符串,则将字符串按空格分割成数组,并遍历数组,调用_on方法.
  1. _off方法

  • 功能:移除一个或多个事件监听器

  • 参数

    • types:事件类型(可以是字符串或对象).
    • fn:事件处理函数.
    • context:事件处理函数的上下文(即this指向).

  • 逻辑

    • 如果没有参数,则移除所有事件监听器
    • 如果types是对象,则遍历对象的键值对,移除对应事件类型的监听器
    • 如果types是字符串,则将字符串按空格分割成数组,并遍历数组,移除对应事件类型的监听器
  1. fire方法

  • 功能: 触发指定类型的事件

  • 参数

    • type:事件类型
    • data:事件数据
    • propagate:是否传播事件

  • 逻辑

    • 检查是否有监听器,如果没有则直接返回
    • 创建事件对象,包含事件类型\目标和源目标,并将事件数据合并到事件对象
    • 调用所有监听器,如果是once事件,则在调用后移除监听器
    • 如果需要传播事件,则调用_propagateEvent方法.
  1. once方法

  • 功能:监听一次性事件(事件触发后自动移除监听器)

  • 参数:

    • types:事件类型(可以是字符串或对象).
    • fn:事件处理函数.
    • context:事件处理函数的上下文(即this指向).

  • 逻辑

    • 与on方法类似,只是将_once参数设置为true,会在事件触发后自动移除监听器
  1. _propagateEvent方法

  • 功能:将传播事件到父对象

  • 逻辑:

    • 遍历所有父对象,调用其fire方法触发事件.
  1. listens方法
  • 功能:检查是否有指定类型的事件监听器
  • 逻辑
    • 检查当前对象是否有监听器
    • 如果需要传播事件,则检查父对象是否有监听器

# 辅助方法

  • _on：内部方法，用于绑定事件监听器。

  • _off：内部方法，用于移除事件监听器。

-_listens：内部方法，用于检查是否有指定类型的事件监听器

# 总结

Event.js是Leaflet 事件系统的核心实现，提供了灵活的事件管理功能，包括监听、触发、移除和传播事件。通过这套系统，开发者可以轻松地实现地图的交互功能.

编辑 (opens new window)
上次更新: 2025/03/17, 01:35:24
Leaflet自定义基类Class
Util工具方法

← Util工具方法→

最近更新
01
GeoJSON
05-08
02
Circle
04-15
03
CircleMarker
04-15
更多文章>
Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License