Simplify events and store listeners only in one place

src/ol/source/Cluster.js

@@ -7,7 +7,6 @@ import {assert} from '../asserts.js';
 import Feature from '../Feature.js';
 import GeometryType from '../geom/GeometryType.js';
 import {scale as scaleCoordinate, add as addCoordinate} from '../coordinate.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {buffer, createEmpty, createOrUpdateFromCoordinate} from '../extent.js';
 import Point from '../geom/Point.js';
@@ -88,7 +87,7 @@ class Cluster extends VectorSource {
      */
     this.source = options.source;
 
-    listen(this.source, EventType.CHANGE, this.refresh, this);
+    this.source.addEventListener(EventType.CHANGE, this.refresh.bind(this));
   }
 
   /**

src/ol/source/ImageArcGISRest.js

@@ -4,7 +4,6 @@
 
 import ImageWrapper from '../Image.js';
 import {assert} from '../asserts.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {containsExtent, getHeight, getWidth} from '../extent.js';
 import {assign} from '../obj.js';
@@ -197,8 +196,7 @@ class ImageArcGISRest extends ImageSource {
 
     this.renderedRevision_ = this.getRevision();
 
-    listen(this.image_, EventType.CHANGE,
-      this.handleImageChange, this);
+    this.image_.addEventListener(EventType.CHANGE, this.handleImageChange.bind(this));
 
     return this.image_;
 

src/ol/source/ImageMapGuide.js

@@ -3,7 +3,6 @@
  */
 
 import ImageWrapper from '../Image.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {containsExtent, getCenter, getHeight, getWidth, scaleFromCenter} from '../extent.js';
 import {assign} from '../obj.js';
@@ -162,8 +161,7 @@ class ImageMapGuide extends ImageSource {
       image = new ImageWrapper(extent, resolution, pixelRatio,
         imageUrl, this.crossOrigin_,
         this.imageLoadFunction_);
-      listen(image, EventType.CHANGE,
-        this.handleImageChange, this);
+      image.addEventListener(EventType.CHANGE, this.handleImageChange.bind(this));
     } else {
       image = null;
     }

src/ol/source/ImageStatic.js

@@ -5,7 +5,6 @@
 import ImageWrapper from '../Image.js';
 import ImageState from '../ImageState.js';
 import {createCanvasContext2D} from '../dom.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {intersects, getHeight, getWidth} from '../extent.js';
 import {get as getProjection} from '../proj.js';
@@ -73,8 +72,7 @@ class Static extends ImageSource {
      */
     this.imageSize_ = options.imageSize ? options.imageSize : null;
 
-    listen(this.image_, EventType.CHANGE,
-      this.handleImageChange, this);
+    this.image_.addEventListener(EventType.CHANGE, this.handleImageChange.bind(this));
 
   }
 

src/ol/source/ImageWMS.js

@@ -6,7 +6,6 @@ import {DEFAULT_WMS_VERSION} from './common.js';
 
 import ImageWrapper from '../Image.js';
 import {assert} from '../asserts.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {containsExtent, getCenter, getForViewAndSize, getHeight, getWidth} from '../extent.js';
 import {assign} from '../obj.js';
@@ -296,8 +295,7 @@ class ImageWMS extends ImageSource {
 
     this.renderedRevision_ = this.getRevision();
 
-    listen(this.image_, EventType.CHANGE,
-      this.handleImageChange, this);
+    this.image_.addEventListener(EventType.CHANGE, this.handleImageChange.bind(this));
 
     return this.image_;
 

src/ol/source/Raster.js

@@ -4,7 +4,6 @@
 import ImageCanvas from '../ImageCanvas.js';
 import TileQueue from '../TileQueue.js';
 import {createCanvasContext2D} from '../dom.js';
-import {listen} from '../events.js';
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import {Processor} from 'pixelworks/lib/index.js';
@@ -172,8 +171,9 @@ class RasterSource extends ImageSource {
      */
     this.layers_ = createLayers(options.sources);
 
+    const changed = this.changed.bind(this);
     for (let i = 0, ii = this.layers_.length; i < ii; ++i) {
-      listen(this.layers_[i], EventType.CHANGE, this.changed, this);
+      this.layers_[i].addEventListener(EventType.CHANGE, changed);
     }
 
     /**

src/ol/source/TileImage.js

@@ -6,7 +6,6 @@ import {getUid} from '../util.js';
 import ImageTile from '../ImageTile.js';
 import TileCache from '../TileCache.js';
 import TileState from '../TileState.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {equivalent, get as getProjection} from '../proj.js';
 import ReprojTile from '../reproj/Tile.js';
@@ -261,8 +260,7 @@ class TileImage extends UrlTile {
       this.tileLoadFunction,
       this.tileOptions);
     tile.key = key;
-    listen(tile, EventType.CHANGE,
-      this.handleTileChange, this);
+    tile.addEventListener(EventType.CHANGE, this.handleTileChange.bind(this));
     return tile;
   }
 

src/ol/source/Vector.js

@@ -428,7 +428,7 @@ class VectorSource extends Source {
    */
   bindFeaturesCollection_(collection) {
     let modifyingCollection = false;
-    listen(this, VectorEventType.ADDFEATURE,
+    this.addEventListener(VectorEventType.ADDFEATURE,
       /**
        * @param {VectorSourceEvent<Geometry>} evt The vector source event
        */
@@ -439,7 +439,7 @@ class VectorSource extends Source {
           modifyingCollection = false;
         }
       });
-    listen(this, VectorEventType.REMOVEFEATURE,
+    this.addEventListener(VectorEventType.REMOVEFEATURE,
       /**
        * @param {VectorSourceEvent<Geometry>} evt The vector source event
        */
@@ -450,7 +450,7 @@ class VectorSource extends Source {
           modifyingCollection = false;
         }
       });
-    listen(collection, CollectionEventType.ADD,
+    collection.addEventListener(CollectionEventType.ADD,
       /**
        * @param {import("../Collection.js").CollectionEvent} evt The collection event
        */
@@ -460,8 +460,8 @@ class VectorSource extends Source {
           this.addFeature(/** @type {import("../Feature.js").default<Geometry>} */ (evt.element));
           modifyingCollection = false;
         }
-      }, this);
-    listen(collection, CollectionEventType.REMOVE,
+      }.bind(this));
+    collection.addEventListener(CollectionEventType.REMOVE,
       /**
        * @param {import("../Collection.js").CollectionEvent} evt The collection event
        */
@@ -471,7 +471,7 @@ class VectorSource extends Source {
           this.removeFeature(/** @type {import("../Feature.js").default<Geometry>} */ (evt.element));
           modifyingCollection = false;
         }
-      }, this);
+      }.bind(this));
     this.featuresCollection_ = collection;
   }
 

src/ol/source/VectorTile.js

@@ -234,7 +234,7 @@ class VectorTile extends UrlTile {
               sourceTile.resolution = sourceTileGrid.getResolution(sourceTileCoord[0]);
               this.sourceTileByCoordKey_[coordKey] = sourceTile;
               empty = false;
-              listen(sourceTile, EventType.CHANGE, this.handleTileChange, this);
+              sourceTile.addEventListener(EventType.CHANGE, this.handleTileChange.bind(this));
               sourceTile.load();
             }
           } else {