Select to view content in your preferred language

Does the JavaScript API support event handling via "on" method?

2227
6
Jump to solution
08-21-2012 09:23 AM
JeffJacobson
Frequent Contributor
The dojo/on module has replaced the dojo.connect method as the preferred way to handle events in Doj....  I am able to get the "on" method to work with DOM events (e.g., HTML button click), but I can't get it to work with any of the ArcGIS JavaScript API classes' events.

Is there a way to use the on method with the ArcGIS JavaScript API events?  (If so, can you provide an example?)
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
Deactivated User
No, objects in the JS API don't support using dojo/on yet. Please continue to use dojo/_base/connect.

View solution in original post

0 Kudos
6 Replies
derekswingley1
Deactivated User
No, objects in the JS API don't support using dojo/on yet. Please continue to use dojo/_base/connect.
0 Kudos
StefanP__Jung
Deactivated User
Hi there,

the Version 3.3 of the ArcGIS API for JavaScript uses Dojo 1.8 but the dojo/on still does not work with the map object. It works wth dojo/_base/connect but it would be nice to use the new event handling and not the stuff that is supported cause of backwards compatiblity.

Do you have any information when dojo/on will work with the map object and the JS API will completely support Dojo 1.8?

Thanks,

Stefan
0 Kudos
ReneRubalcava
Esri Frequent Contributor
Custom events won't work, but you can actually use dojo/on for native events on things like a "click" event and do some useful things. Other events, like "load" won't work yet.

Here is a sample of how you might use dojo/on to handle multple map click events, like say you want to switch between identify on a map and draw on a map.
https://gist.github.com/odoe/4542944
// Purely sample
// Just demonstrates how you may use the dojo/on method
// with the map click and other click events

define('identifyHandler', ['dojo/on', 'esri/tasks/identify'], function(on) {

  var _idhandler = function(map) {
  
  var task = new esri.tasks.IdentifyTask('url');
  var idparams = new esri.tasks.IdentifyParameters();
  idparams.tolerance = 3;
  idparams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
  // callback train, yeah yeah, it's a sample, jeez
  this.handler = on.pausable(map, 'click', function(e) {
  
   // blah blah, set up your Identify Parameters
   var deferred = task.execute(idparams);
   deferred.then(function(){
    // blah blah, do something
   });
  
  });
  
 };
 
 return _idhandler;

});

define('mapView', ['dojo/connect', 'identifyHandler', 'esri/map', 'esri/toolbars/draw'], function(connect, IdHandler) {

 var _mapview = function() {
 
  var self = this;
  this.start = function() {
  
   self.map = new esri.Map('map');
   /**
   do a bunch of map stuff
   **/
   
   connect.connect(self.map, 'onLoad', function() {
   
    // initialize my little identify helper module
    var identify = new IdHandler(self.map);
    
    /**
    Now, let's say you have a drawtool that will add points
    to your map for some reason. A common problem is you can add the point,
    but the map click to add a point also triggers the identify.
    Easy way to handle this now...
    **/
    
    var drawTool = new esri.toolbars.Draw(map);
    /** draw nonsense stuff here somewhere **/
    connect.connect(someButton, 'click', function() {
    
     drawTool.activate(esri.toolbars.Draw.POINT);
     // now pause the identify map click
     identify.handler.pause();
     
    });
    
    connect.connect(drawTool, 'onDrawEnd', function(geom) {
    
     drawTool.deactivate();
     // turn the identify back on
     identify.handler.resume();
    
    });
    
   });
  
  };
 
 };
 
 return _mapview;

});


It can actually come in pretty handy. This has worked since the 3.0 release I think, because I tested it with 3.2. So I'm assuming since the upgrade to Dojo 1.7.
0 Kudos
StefanP__Jung
Deactivated User
Even for the click event in the map I am currently using, the following which works fine:

require(["dojo/_base/connect"], function(Connect){
    Connect.connect(map, "onClick", function() {
     // do something
    });
});


In future i hope that this will work:

require(["dojo/on"], function(On){
    On(map, "onClick", function() {
     // do something
    });
});


at the moment this throws this exception:
Error: Target must be an event emitter

Cause i have to use the Connect for all the other events like you also did in your example (onLoad etc.) I will go on with this till the On is supported.
0 Kudos
derekswingley1
Deactivated User
We're moving to using dojo/Evented for events in the future. Instead of the dojo.connect code you see now, you'll be able to do this:

map.on("click", function(e) {
  console.log("map was clicked: ", e, e.mapPoint);
});


We hope to have this in the next release (3.4) for all objects (map, layers, widgets, etc).
0 Kudos
StefanP__Jung
Deactivated User
Thank you very much for your feedback.

Looking forward to it 🙂
0 Kudos