How do you remove a dojo connected event if you do not have the “handle” that was returned during the dojo.connect?

Question

How do you remove a dojo connected event if you do not have the "handle" that was returned during the dojo.connect?

My example involves dynamically assigning a set of events to a set of objects. (for simplicity, the events are onclick and ondblclick, and the objects are rows within a table)

So, during page setup events are connected to each row (onclick, ondblclick). Now, depending on user desires/actions, a need for removal of one event from one row is required. But the original handle is no longer available. Because of this the following will not work: dojo.disconnect(row, "onclick", ??*). How do I get around this without hacking the original row structure?

Any help is of course greatly appreciated.

Answer 1

What I usually do is save the handles when I create them so I can disconnect them later. Something like:

 var connects = {};

 // then later on
 var node = dojo.create(....); // or someting else that gives you a node
 dojo.forEach( ['click','ondblclick' ], function( evt, idx ) {
   if (!connects[node.id]) {
     connects[node.id] = [];
   }
   connects[ node.id ][idx] = dojo.connect( node, evt, function(evt) { .... });
 });

Then later, on you can disconnect like:

 dojo.forEach( connects[node.id], function( handle ) {
   dojo.disconnect( handle );
 });

There's a similar code sample for this on dojocampus

Answer 2

The answer to your question is that is it impossible to disconnect event if you have lost the "handle" that was returned during the dojo.connect operation. Except if you are ready to do heavy hacking of dojo code itself.

You must store these somewhere if you wish to disconnect them later on.

Answer 3

Like Seth I have my patterns for removing events — I collect handles in arrays (pseudo-code):

var handles = [
  dojo.connect(...),
  dojo.connect(...),
  dojo.connect(...)
];

If I connect dynamically I just collect them:

var handles = [];
...
handles.push(dojo.connect(...));
...
handles.push(dojo.connect(...));

If I connect several events in a regular manner I can use dojo.map():

var handles = dojo.map(["click", "ondblclick"], function(evt){
  return dojo.connect(node, evt, ...);
});

The neat part is that later I can disconnect them all with a handy one-liner:

dojo.forEach(handles, dojo.disconnect);

In your case you can use a dictionary like shown by Seth to accomplish the same:

var handles = {};
...
handles[node.id] = dojo.map(["click", "ondblclick"], function(evt){
  return dojo.connect(node, evt, ...);
});

So later one you can disconnect handlers like this:

dojo.forEach(handles[node.id], dojo.disconnect);

See if Seth' and my sketches help in your case. If not, give us more details.

Answer 4

Even though dojo doesn't have a way to do this, you can remove a named function with standard JavaScript:

node.removeEventListener ("click", clickFunction, false);

See it in action here. However, removeEventListener is only supported as of IE9 for Internet Explorer. It should work on all the other major browsers.

Answer 5

If the event is connected to a Dijit widget, you can override all handlers on the event like so:

dijit.byId(widgetid).onClick = function() {
    // click handler or empty function goes here
}

Any and all functions attached to the click handler for that widget will be replaced by your new click handler.