OpenLayers2 源码解读 事件Event、Events

OpenLayers.Event就是一个工具类，封装了一些dom事件操作方法，兼容性及操作更好点，比如stop、preventDefault、observe注册事件等等

重点是OpenLayers.Events

//支持的浏览器事件

BROWSER_EVENTS: [
"mouseover", "mouseout",
"mousedown", "mouseup", "mousemove",
"click", "dblclick", "rightclick", "dblrightclick",
"resize", "focus", "blur",
"touchstart", "touchmove", "touchend",
"keydown"
],

很多东西看api、源码注释就了解的差不多了，例如

includeXY: false

注意，这不是经纬度坐标，而是屏幕相对于map的屏幕坐标

源码中解释Should the .xy property automatically be created for browser

* mouse events?//xy属性是否应该包含在event的属性之中；

例如Map.js中

this.events = new OpenLayers.Events(
this, this.viewPortDiv, null, this.fallThrough,
{includeXY: true}
);

也就是说，map对象的事件中都可以用event.xy获取

具体使用方法看MousePosition.js这个control

this.map.events.register('mousemove', this, this.redraw);//注册mousemove事件
redraw: function(evt) {
var lonLat;
if (evt == null) {
this.reset();
return;
} else {
if (this.lastXy == null ||
Math.abs(evt.xy.x - this.lastXy.x) > this.granularity ||
Math.abs(evt.xy.y - this.lastXy.y) > this.granularity)
{
this.lastXy = evt.xy;
return;
}

lonLat = this.map.getLonLatFromPixel(evt.xy);
...........
}
},

什么事件需要自己触发，什么事件需要手动触发（自己写代码）？

大概也能猜到，浏览器事件是不需要自己写的，对，只要是BROWSER_EVENTS事件中的都可以按浏览器事件触发

看initialize构造函数中最后一段

if (element != null) {
this.attachToElement(element);
}
attachToElement: function (element) {
......
for (var i = 0, len = this.BROWSER_EVENTS.length; i < len; i++) {
type = this.BROWSER_EVENTS[i];
// register the event cross-browser
OpenLayers.Event.observe(element, type, this.eventHandler
);
.....
},

就是说，这些事件，你不需要手动触发的，当你绑定一个element时，这些事件也就已经在监听了

浏览器是如何监视和触发事件

注册事件有两种方式：register和on方法

源码中有解释

events.on({
"loadstart": loadStartListener,
"loadend": loadEndListener,
scope: object
});
// this is equivalent to the following
events.register("loadstart", object, loadStartListener);
events.register("loadend", object, loadEndListener);

这些事件时如何触发的呢？

还是看Map.js中有这么一段代码：

this.events.triggerEvent("addlayer", {layer: layer});
layer.events.triggerEvent("added", {map: this, layer: layer});

触发事件的方法是triggerEvent，同时需要注意的是，这些自定义的事件需要绑定一个对象，显然不是dom elment，而是这些js对象map、layer等等

triggerEvent: function (type, evt) {
var listeners = this.listeners[type];
// fast path
if(!listeners || listeners.length == 0) {
return undefined;
}
// prep evt object with object & div references
if (evt == null) {
evt = {};
}
evt.object = this.object;
evt.element = this.element;
if(!evt.type) {
evt.type = type;
}
// execute all callbacks registered for specified type
// get a clone of the listeners array to
// allow for splicing during callbacks
listeners = listeners.slice();
var continueChain;
for (var i=0, len=listeners.length; i<len; i++) {
var callback = listeners[i];
// bind the context to callback.obj
continueChain = callback.func.apply(callback.obj, [evt]);

if ((continueChain != undefined) && (continueChain == false)) {
// if callback returns false, execute no more callbacks.
break;
}
}

它会找到通过listeners找到这个所有的这个事件对应的方法，然后执行

假如注册同一个事件，两次会怎么样呢？

并不会冲突，注册几次执行几次；如果方法返回false，则不会执行其后的事件函数

function init(){
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);

map.events.on({"test":testMethod});
map.events.on({"test":testMethod2});
map.events.triggerEvent("test", {});
}
function testMethod(){
alert("testMethod");
//返回false，则后注册的方法不会执行
//return false;
}
function testMethod2(){
alert("testMethod2");
}

源码

for (var i=0, len=listeners.length; i<len; i++) {
var callback = listeners[i];
// bind the context to callback.obj
continueChain = callback.func.apply(callback.obj, [evt]);

if ((continueChain != undefined) && (continueChain == false)) {
// if callback returns false, execute no more callbacks.
break;
}
}