Does EaselJS's removeChild method, (part of Stage), handle cleanup of eventListeners attached to that child, as well? Or must you manually remove the child's event listeners using removeEventListener before removing the child?

For example:

stage = new createjs.Stage(canvas);
circle = new createjs.Shape();
circle.graphics.beginFill("#333").drawCircle(0,0,5);

circle.addEventListener("mousedown",function(event){
    console.log("mouse down");
});
stage.addChild(circle);
.
.
.
stage.removeChild(circle);

Does EaselJS's removeChild method, (part of Stage), handle cleanup of eventListeners attached to that child, as well? Or must you manually remove the child's event listeners using removeEventListener before removing the child?

For example:

stage = new createjs.Stage(canvas);
circle = new createjs.Shape();
circle.graphics.beginFill("#333").drawCircle(0,0,5);

circle.addEventListener("mousedown",function(event){
    console.log("mouse down");
});
stage.addChild(circle);
.
.
.
stage.removeChild(circle);

• javascript
• event-handling
• garbage-collection
• dom-events
• easeljs

1 Answer 1

EventListeners are not removed upon removeChild(), as they are also not added upon addChild() - If you do want to quickly remove them all, the quickest way would be myChild.removeAllEventListeners();

However if a DisplayObject is not attached to the Stage somehow, events won't be dispatched by mouse-interactions, because those only bubble through the stage and its' children.

In case you worry about memory-leaks: Events in EaselJS are sitting directly on the DisplayObject itself, so whenever you delete the reference to that Object, the Events will(should) be collected by the GarbageCollecter as well, no need for removing events separately. (please, someone correct me here, in case I'm wrong)