Using unique event type values for distinct events

Any event target can be used to dispatch generic goog.events.Event instances with an arbitrary type.  In cases where we dispatch custom events, we should not use type values that collide with those used for generic events (at least internally).  This allows listeners a better chance of knowing what kind of argument they will receive.

As subsequent change will clean up the enumeration and add a bit more consistency.

examples/device-orientation.js

@@ -25,11 +25,13 @@ var deviceOrientation = new ol.DeviceOrientation();
 var track = new ol.dom.Input(document.getElementById('track'));
 track.bindTo('checked', deviceOrientation, 'tracking');
 
-deviceOrientation.on('change', function(event) {
+deviceOrientation.on('propertychange', function(event) {
-  document.getElementById('alpha').innerHTML = event.target.getAlpha();
+  // event.key is the changed property name
-  document.getElementById('beta').innerHTML = event.target.getBeta();
+  var key = event.key;
-  document.getElementById('gamma').innerHTML = event.target.getGamma();
+  var element = document.getElementById(key);
-  document.getElementById('heading').innerHTML = event.target.getHeading();
+  if (element) {
+    element.innerHTML = deviceOrientation.get(key);
+  }
 });
 
 // tilt the map

examples/geolocation.js

@@ -29,7 +29,7 @@ geolocation.bindTo('projection', map.getView());
 var track = new ol.dom.Input(document.getElementById('track'));
 track.bindTo('checked', geolocation, 'tracking');
 
-geolocation.on('change', function() {
+geolocation.on('propertychange', function() {
   $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
   $('#altitude').text(geolocation.getAltitude() + ' [m]');
   $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');

src/ol/layer/layergroup.js

@@ -3,6 +3,7 @@ goog.provide('ol.layer.Group');
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.events');
+goog.require('goog.events.EventType');
 goog.require('goog.math');
 goog.require('goog.object');
 goog.require('ol.Collection');
@@ -104,7 +105,8 @@ ol.layer.Group.prototype.handleLayersChanged_ = function(event) {
     for (i = 0, ii = layersArray.length; i < ii; i++) {
       layer = layersArray[i];
       this.listenerKeys_[goog.getUid(layer).toString()] =
-          goog.events.listen(layer, ol.ObjectEventType.CHANGE,
+          goog.events.listen(layer,
+              [ol.ObjectEventType.CHANGE, goog.events.EventType.CHANGE],
               this.handleLayerChange_, false, this);
     }
   }
@@ -120,8 +122,8 @@ ol.layer.Group.prototype.handleLayersChanged_ = function(event) {
 ol.layer.Group.prototype.handleLayersAdd_ = function(collectionEvent) {
   var layer = /** @type {ol.layer.Base} */ (collectionEvent.getElement());
   this.listenerKeys_[goog.getUid(layer).toString()] = goog.events.listen(
-      layer, ol.ObjectEventType.CHANGE, this.handleLayerChange_, false,
+      layer, [ol.ObjectEventType.CHANGE, goog.events.EventType.CHANGE],
-      this);
+      this.handleLayerChange_, false, this);
   this.dispatchChangeEvent();
 };
 

src/ol/map.js

@@ -39,6 +39,7 @@ goog.require('ol.MapBrowserEventHandler');
 goog.require('ol.MapEvent');
 goog.require('ol.MapEventType');
 goog.require('ol.Object');
+goog.require('ol.ObjectEvent');
 goog.require('ol.ObjectEventType');
 goog.require('ol.Pixel');
 goog.require('ol.PostRenderFunction');
@@ -208,9 +209,9 @@ ol.Map = function(options) {
 
   /**
    * @private
-   * @type {goog.events.Key}
+   * @type {Array.<goog.events.Key>}
    */
-  this.layerGroupPropertyListenerKey_ = null;
+  this.layerGroupPropertyListenerKeys_ = null;
 
   /**
    * @private
@@ -899,7 +900,18 @@ ol.Map.prototype.handleViewChanged_ = function() {
  * @param {goog.events.Event} event Event.
  * @private
  */
+ol.Map.prototype.handleLayerGroupMemberChanged_ = function(event) {
+  goog.asserts.assertInstanceof(event, goog.events.Event);
+  this.render();
+};
+
+
+/**
+ * @param {ol.ObjectEvent} event Event.
+ * @private
+ */
 ol.Map.prototype.handleLayerGroupPropertyChanged_ = function(event) {
+  goog.asserts.assertInstanceof(event, ol.ObjectEvent);
   this.render();
 };
 
@@ -908,15 +920,23 @@ ol.Map.prototype.handleLayerGroupPropertyChanged_ = function(event) {
  * @private
  */
 ol.Map.prototype.handleLayerGroupChanged_ = function() {
-  if (!goog.isNull(this.layerGroupPropertyListenerKey_)) {
+  if (!goog.isNull(this.layerGroupPropertyListenerKeys_)) {
-    goog.events.unlistenByKey(this.layerGroupPropertyListenerKey_);
+    var length = this.layerGroupPropertyListenerKeys_.length;
-    this.layerGroupPropertyListenerKey_ = null;
+    for (var i = 0; i < length; ++i) {
+      goog.events.unlistenByKey(this.layerGroupPropertyListenerKeys_[i]);
+    }
+    this.layerGroupPropertyListenerKeys_ = null;
   }
   var layerGroup = this.getLayerGroup();
   if (goog.isDefAndNotNull(layerGroup)) {
-    this.layerGroupPropertyListenerKey_ = goog.events.listen(
+    this.layerGroupPropertyListenerKeys_ = [
-        layerGroup, ol.ObjectEventType.CHANGE,
+      goog.events.listen(
-        this.handleLayerGroupPropertyChanged_, false, this);
+          layerGroup, ol.ObjectEventType.CHANGE,
+          this.handleLayerGroupPropertyChanged_, false, this),
+      goog.events.listen(
+          layerGroup, goog.events.EventType.CHANGE,
+          this.handleLayerGroupMemberChanged_, false, this)
+    ];
   }
   this.render();
 };

src/ol/object.js

@@ -6,6 +6,7 @@
  */
 
 goog.provide('ol.Object');
+goog.provide('ol.ObjectEvent');
 goog.provide('ol.ObjectEventType');
 
 goog.require('goog.array');
@@ -21,7 +22,7 @@ goog.require('ol.Observable');
  */
 ol.ObjectEventType = {
   BEFORECHANGE: 'beforechange',
-  CHANGE: 'change'
+  CHANGE: 'propertychange'
 };