EaselJS passing parameters with events

Question

I am using Adobe Flash CC to create EaselJS output manipulating the HTML5 canvas. However there seems to be a massive oversight in the ability to pass parameters to event listeners.

The issue is that I offer multiple animation outputs for compatibility, one using EaselJS and one using Raphael, however the interface that controls these remains the same, these are plain HTML elements with data stored in attributes that I wish to call functions written in the Flash IDE by triggering events and passing parameters.

I could easily find ways to avoid using EventDispatcher such as registering them with the root object and calling them directly with custom handlers. However I would rather keep my Flash IDE output as universally compatible as possible and not pollute object's namespaces I have little control over. I consider it a bad design pattern to write code in the Flash IDE that won't work without external aid.

Is there a way to pass parameters from an EaselJS event dispatcher to the listening events? I know on() provides a data parameter but that is useless as I need to pass different parameters to the same event depending upon user interaction.

Answer 1

You can put any properties on an Event object that you want. When you dispatch an event, you can use a string like "complete" (which is better if you don't need parameters, since it won't generate an object if there are no listeners). If you have parameters, create a new createjs.Event, and put whatever properties on it that you want:

var event = new createjs.Event("complete");
event.time = new Date();
this.dispatchEvent(event);

Then you can inspect the event object in your handler.

myObject.addEventListener("complete", handler); // add a listener
function handler(event) {
    console.log(event.time);
}

Hope that helps!