Fix the event listener leak, which has been a serious problem when large numbers of markers etc. are created. Closes #510.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@2867 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control/Navigation.js

@@ -59,20 +59,35 @@ OpenLayers.Control.Navigation.prototype =
         return false;
     },
 
+    wheelChange: function(evt, deltaZ) {
+        console.log("wheel " + deltaZ);
+        var newZoom = this.map.getZoom() + deltaZ;
+        if (!this.map.isValidZoomLevel(newZoom)) return;
+
+        var size    = this.map.getSize();
+        var deltaX  = size.w/2 - evt.xy.x;
+        var deltaY  = size.h/2 - evt.xy.y;
+        var newRes  = map.baseLayer.resolutions[newZoom];
+        var zoomPoint = this.map.getLonLatFromPixel(evt.xy);
+        var newCenter = new OpenLayers.LonLat(
+                            zoomPoint.lon + deltaX * newRes,
+                            zoomPoint.lat - deltaY * newRes );
+        console.log(newCenter.toString());
+        this.map.setCenter( newCenter, newZoom );
+    },
+
     /** User spun scroll wheel up
      * 
      */
     wheelUp: function(evt) {
-        this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
+        this.wheelChange(evt, 1);
-                           this.map.getZoom() + 1);
     },
 
     /** User spun scroll wheel down
      * 
      */
     wheelDown: function(evt) {
-        this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
+        this.wheelChange(evt, -1);
-                           this.map.getZoom() - 1);
     },
     
     /** @final @type String */

lib/OpenLayers/Events.js

@@ -72,7 +72,6 @@ OpenLayers.Event = {
     if (!OpenLayers.Event.observers) return;
     for (var i = 0; i < OpenLayers.Event.observers.length; i++) {
       OpenLayers.Event.stopObserving.apply(this, OpenLayers.Event.observers[i]);
-      OpenLayers.Event.observers[i][0] = null;
     }
     OpenLayers.Event.observers = false;
   },
@@ -98,6 +97,28 @@ OpenLayers.Event = {
         || element.detachEvent))
       name = 'keydown';
 
+    // find entry in this.observers cache array and remove it
+    var observers = OpenLayers.Event.observers;
+    var entry = [element, name, observer, useCapture];
+    for (var i = 0; i < observers.length; i++) {
+        var observer = observers[i];
+
+        //compare all 4 elements of entry with observer
+        var sameEntry = true;        
+        for (var j = 0; j < entry.length; j++) {
+            if (entry[j] != observer[j]) {
+                sameEntry = false;
+                break;
+            }
+        }
+
+        //if we've found it, remove it from the observers array
+        if (sameEntry) {
+            observers.splice(i--, 1);
+            break; 
+        }
+    }
+
     if (element && element.removeEventListener) {
       element.removeEventListener(name, observer, useCapture);
     } else if (element && element.detachEvent) {
@@ -114,8 +135,6 @@ if (window.Event) {
   var Event = OpenLayers.Event;
 }
 
-
-
 /**
  * @class
  */
@@ -143,6 +162,15 @@ OpenLayers.Events.prototype = {
     /** @type Array: list of support application events */
     eventTypes: null,
 
+    /**
+    * @type Function: bound event handler attached to elements
+    * @private
+    */
+    eventHandler: null,
+
+    /** @type Boolean */
+    fallThrough: null,
+
     /**
      * @constructor 
      * 
@@ -160,6 +188,10 @@ OpenLayers.Events.prototype = {
         this.fallThrough = fallThrough;
         this.listeners  = new Object();
 
+        // keep a bound copy of handleBrowserEvent() so that we can
+        // pass the same function to both Event.observe() and .stopObserving()
+        this.eventHandler = this.handleBrowserEvent.bindAsEventListener(this);
+
         // if eventTypes is specified, create a listeners list for each 
         // custom application event.
         if (this.eventTypes != null) 
@@ -172,6 +204,22 @@ OpenLayers.Events.prototype = {
             this.attachToElement(element);
     },
 
+    /**
+     * 
+     */
+    destroy: function () {
+        if (this.element) {
+            this.detachFromElement();
+        }
+        this.element = null;
+
+        this.listeners = null;
+        this.object = null;
+        this.eventTypes = null;
+        this.fallThrough = null;
+        this.eventHandler = null;
+    },
+
     /**
     * @param {HTMLDOMElement} element a DOM element to attach browser events to
     */
@@ -185,13 +233,28 @@ OpenLayers.Events.prototype = {
                 this.listeners[eventType] = new Array();
 
             // use Prototype to register the event cross-browser
-            OpenLayers.Event.observe(element, eventType, 
+            OpenLayers.Event.observe(element, eventType, this.eventHandler);
-                this.handleBrowserEvent.bindAsEventListener(this));
         }
         // disable dragstart in IE so that mousedown/move/up works normally
         OpenLayers.Event.observe(element, "dragstart", OpenLayers.Event.stop);
     },
     
+    /**
+     * @private
+     */
+    detachFromElement: function () {
+        for (var i = 0; i < this.BROWSER_EVENTS.length; i++) {
+            var eventType = this.BROWSER_EVENTS[i];
+
+            OpenLayers.Event.stopObserving(
+                this.element, eventType, this.eventHandler);
+        }
+
+        // re-enable dragstart in IE
+        OpenLayers.Event.stopObserving(
+            this.element, "dragstart", OpenLayers.Event.stop);
+    },
+
     /**
      * @param {String} type Name of the event to register
      * @param {Object} obj The object to bind the context to for the callback#.
@@ -227,9 +290,18 @@ OpenLayers.Events.prototype = {
             }
         }
     },
-    // TODO: get rid of this in 3.0
+
-    // Decide whether listeners should be called in the order they were
+    /**
-    // registered or in reverse order.
+     *   TODO: get rid of this in 3.0 - Decide whether listeners should be 
+     *         called in the order they were registered or in reverse order.
+     * 
+     * @param {String} type Name of the event to register
+     * @param {Object} obj The object to bind the context to for the callback#.
+     *                     If no object is specified, default is the Events's 
+     *                     'object' property.
+     * @param {Function} func The callback function. If no callback is 
+     *                        specified, this function does nothing.
+     */
     registerPriority: function (type, obj, func) {
 
         if (func != null) {

tests/test_Events.html

@@ -202,10 +202,26 @@
         t.eq(a, 5, "if Events has no object set and an event is registered also with no object, triggerEvent() calls it without trying to set the context to null");        
     }
 
+    function test_05_Event_destroy (t) {
+        t.plan(2);
+        var start = OpenLayers.Event.observers.length;
+        var div   = OpenLayers.Util.getElement('test');
+        var obj   = {};
+        var events = new OpenLayers.Events(obj, div);
+        // +1 because of blocking dragstart in attachToElement()
+        t.eq(OpenLayers.Event.observers.length,
+             start + OpenLayers.Events.prototype.BROWSER_EVENTS.length + 1,
+             "construction increases the number of event observers");
+        events = events.destroy();
+        t.eq(OpenLayers.Event.observers.length, start,
+             "destruction restores the number of event observers");
+    }
+   
   // -->
   </script>
 </head>
 <body>
     <div id="map" style="width: 1024px; height: 512px;"/>
+    <div id="test"></div>
 </body>
 </html>