How to delete a listener in OpenLayers 3

Question

I make a copy of my question here at stackoverflow, because at gis.stackexchange all my questions do not attract any attention - many times I could not get an answer to simple questions there. So, my question now is how to delete a listener defined this way:

map.getViewport().addEventListener('click', function (e){
   console.log("clicked");      
}); 

Answer 1

OL3 emmits its own kind of events you could use instead and, to answer your original question, gives an easy and quick way to unregister them.

Look at this example: http://openlayers.org/en/v3.13.0/examples/vector-layer.html

More specifically, at these lines:

  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

  map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });

The ol.Map object has a on method you can use to register event listeners on the ol3 map browser events. It's best to use those events instead of standard browser events. See the list of all map browser events here: http://openlayers.org/en/v3.13.0/apidoc/ol.MapBrowserEvent.html

To unregister, you can:

a) use the un method, but make sure you to give the same callback method as 2nd argument. In other words:

  var callback = function(evt) {
    displayFeatureInfo(evt.pixel);
  };
  map.on('click', callback);
  map.un('click', callback);

b) an other way is to use the ol.Observable.unByKey method, which I like a lot. When calling on or once, it returns a key that references the event. You can then use that key to unlisten your event:

  var key = map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });
  ol.Observable.unByKey(key);

I find b) to be more friendly as you can register a bunch of event listeners and put all the keys inside an array. When you want to unregister them all, loop in the array and call the unByKey method, then empty the array. It generates less code that way than having to unregister all events manually.