OpenLayers学习12-事件Event_1

Event.observe(观察)方法 是核心方法, 相当于给dom注册事件.
主要思路是给接收冒泡的dom对象新建一个缓存OL事件数组, 数组里每个元素都是对evt和target的描述,
完成上述缓存后 最后再addEventListener/attachEvent

Event.stopObserving是observe的逆操作

//只是 Namespace, 不是类
OpenLayers.Event = {
 
    //观察者: 用hashtable缓存event的观察者,  key是element._eventCacheID 
    observers: false,
 
    //空格 
    KEY_SPACE: 32,
     
    //退格键
    KEY_BACKSPACE: 8,
 
    //KEY_TAB 
    KEY_TAB: 9,
 
    //KEY_RETURN  
    KEY_RETURN: 13,
 
    //KEY_ESC  
    KEY_ESC: 27,
 
    //KEY_LEFT  
    KEY_LEFT: 37,
 
    //KEY_UP  
    KEY_UP: 38,
 
    //KEY_RIGHT  
    KEY_RIGHT: 39,
 
    //KEY_DOWN  
    KEY_DOWN: 40,
 
    //KEY_DELETE  
    KEY_DELETE: 46,
 
 
    //从传出event获得事件来源
    //ie是event.srcElement
    element: function(event) {
        return event.target || event.srcElement;
    },
 
    //从传入evt判断是否是"单点触摸"
    isSingleTouch: function(event) {
        return event.touches && event.touches.length == 1;
    },
 
    //判断是否是"多点触摸"
    isMultiTouch: function(event) {
        return event.touches && event.touches.length > 1;
    },
 
    //判断是否是左键点击事件 
    isLeftClick: function(event) {
        return (((event.which) && (event.which == 1)) ||
                ((event.button) && (event.button == 1)));
    },
 
    //判断是否是右键点击事件
    isRightClick: function(event) {
        return (((event.which) && (event.which == 3)) ||
                ((event.button) && (event.button == 2)));
    },
      
    //阻止事件传播
    //allowDefault为true时, 会阻止事件传播, 但允许浏览器默认事件. flase就相当于与return false.
    stop: function(event, allowDefault) {
        //1 是否阻止浏览器默认事件
        if (!allowDefault) { 
            OpenLayers.Event.preventDefault(event);
        }
         
        //2 都要阻止event冒泡
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;//ie兼容
        }
    },
 
    //阻止浏览器默认事件 
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;//ie兼容
        }
    },
 
    //上溯evt的事件源, 找到最起始端的"tagName"标签
    findElement: function(event, tagName) {
        var element = OpenLayers.Event.element(event);
        while (element.parentNode && (!element.tagName ||
              (element.tagName.toUpperCase() != tagName.toUpperCase()))){
            element = element.parentNode;
        }
        return element;
    },
 
 
    //观察, 相当于给dom注册事件. 核心方法
    //主要思路是给接收冒泡的dom对象新建一个缓存OL事件数组, 数组里每个元素都是对evt和target的描述, 
    //完成上述缓存后 最后再addEventListener/attachEvent
 
    //elementParam是dom的id
    //name: 事件名
    //observer: 
    //useCapture是addEventListener的第三个参数(常用的冒泡对应false)
    observe: function(elementParam, name, observer, useCapture) {
        var element = OpenLayers.Util.getElement(elementParam);
        useCapture = useCapture || false;
 
        //兼容处理'keypress'要替换为'keydown'
        if (name == 'keypress' &&
           (navigator.appVersion.match(/Konqueror|Safari|KHTML/)
           || element.attachEvent)) {
            name = 'keydown';
        }
 
        //本Event对象的observers要是没初始化就初始化一下
        if (!this.observers) {
            this.observers = {};
        }
 
        //如果element还没有_eventCacheID(没有绑定OpenLayers事件), 就给分配一个
        if (!element._eventCacheID) {
            var idPrefix = "eventCacheID_";
            if (element.id) {
                idPrefix = element.id + "_" + idPrefix;
            }
            element._eventCacheID = OpenLayers.Util.createUniqueID(idPrefix);
        }
 
        var cacheID = element._eventCacheID;
 
        //如果在Event的observers里还没有对应的_eventCacheID的数组, 新建一个
        if (!this.observers[cacheID]) {
            this.observers[cacheID] = [];
        }
 
        //给observers[对应cacheID]数组里, push进一个对象, 数据结构为
        //{'element': element,'name': name,'observer': observer,'useCapture': useCapture}
        this.observers[cacheID].push({
            'element': element,
            'name': name,
            'observer': observer,
            'useCapture': useCapture
        });
 
        //最后再添加浏览器的事件
        if (element.addEventListener) {
            element.addEventListener(name, observer, useCapture);
        } else if (element.attachEvent) {
            element.attachEvent('on' + name, observer);
        }
    },
 
    //解除观察1
    stopObservingElement: function(elementParam) {
        var element = OpenLayers.Util.getElement(elementParam);
        var cacheID = element._eventCacheID;
 
        this._removeElementObservers(OpenLayers.Event.observers[cacheID]);
    },
 
    //解除观察2
    //传入OpenLayers.Event.observers[cacheID] 
    _removeElementObservers: function(elementObservers) {
        if (elementObservers) {
            for(var i = elementObservers.length-1; i >= 0; i--) {
                var entry = elementObservers[i];
                //用apply保存this现场
                OpenLayers.Event.stopObserving.apply(this, [
                    entry.element, entry.name, entry.observer, entry.useCapture
                ]);
            }
        }
    },
 
    //解除观察3
    // observe方法的逆操作
    stopObserving: function(elementParam, name, observer, useCapture) {
        useCapture = useCapture || false;//默认是冒泡
     
        var element = OpenLayers.Util.getElement(elementParam);
        var cacheID = element._eventCacheID;
 
        //兼容处理'keypress', 替换为'keydown'
        if (name == 'keypress') {
            if ( navigator.appVersion.match(/Konqueror|Safari|KHTML/) || 
                 element.detachEvent) {
              name = 'keydown';
            }
        }
 
        var foundEntry = false;
        var elementObservers = OpenLayers.Event.observers[cacheID];
        if (elementObservers) {
     
            //遍历查找
            var i=0;
            while(!foundEntry && i < elementObservers.length) {
                var cacheEntry = elementObservers[i];
                //条件是数据结构全等
                if ((cacheEntry.name == name) &&
                    (cacheEntry.observer == observer) &&
                    (cacheEntry.useCapture == useCapture)) {
     
                    elementObservers.splice(i, 1);//删除对应项
                    if (elementObservers.length == 0) {//如果数组长度为0
                        delete OpenLayers.Event.observers[cacheID];//需要delete
                    }
                    foundEntry = true;//找到直接break
                    break; 
                }
                i++;           
            }
        }
     
        //最后 removeEventListener / detachEvent
        if (foundEntry) {
            if (element.removeEventListener) {
                element.removeEventListener(name, observer, useCapture);
            } else if (element && element.detachEvent) {
                element.detachEvent('on' + name, observer);
            }
        }
        return foundEntry;
    },
     
    //GC卸载缓存, 遍历每一个OpenLayers.Event.observers[cacheID], 都删掉
    unloadCache: function() {
        if (OpenLayers.Event && OpenLayers.Event.observers) {
            for (var cacheID in OpenLayers.Event.observers) {
                var elementObservers = OpenLayers.Event.observers[cacheID];
                OpenLayers.Event._removeElementObservers.apply(this, 
                                                           [elementObservers]);
            }
            OpenLayers.Event.observers = false;
        }
    },
 
    CLASS_NAME: "OpenLayers.Event"
};
 
//调用一次observe, 
//给window绑定'unload'事件, 去GC缓存
OpenLayers.Event.observe(window, 'unload', OpenLayers.Event.unloadCache, false);