html5 canvas and remove listener

[teresah9791625]

In an html5 canvas project, if you add a listener on a frame and then go to another frame, do you have to worry about removing the listener or is it automatically removed when you go to another frame?

[Colin Holgate · Accepted solution]

Things are worse than you could have guessed! Not only do listeners stick around, and you ought to remove them, the current state of movieclips is still in memory. Any listeners you set would still be going, even with the movieclip not being on the stage at the time.

In AS3 you could tell a movieclip to go to frame 2, go somewhere that the movieclip doesn't exist, come back, and it's on frame 1. With Canvas it would still be on frame 2.

So, when going back to where something was, you will most likely needed to reset things with your own code.

[teresah9791625]

That is what I was afraid of. Is there a way to check if a listener exist?

[Colin Holgate]

It works like AS3, there is hasEventListener:

EaselJS v1.0.0 API Documentation : EventDispatcher

[ClayUUID]

Because Canvas event listeners are cumulative (unlike in ActionScript), a common idiom in my own code is:

if (!bla.hasEventListener()) {

     bla.addEventListener("event", blaHandler);
}

[SSSSSSBenay]

Hello, I know this post is over a year old but I am also new to HTML5 Canvas in Animate and I have just come across this same issue with event listeners not going away when the main timeline of an Animate project is advanced. I have a main timeline consisting of 6 frames, and in each of those frame are numerous movieclips with their own javascript inside to control buttons and animations within these movieclips. On my main timeline I have arrow buttons that advance through the 6 frames. @ClayUUID could you please explain to me that code that you use above? I do not quite understand it. Is there a way that I can remove event handlers that are within movieclips and sub movieclips from code placed on the main timeline (i.e. when the user clicks the navigation arrow buttons on my main timeline to advance to the next frame, is it possible I can include in that button function some code to remove event handlers from within submovieclip on the current frame?) Thank you in advance!

[ClayUUID]

SSSSSSBenay  wrote

Is there a way that I can remove event handlers that are within movieclips and sub movieclips from code placed on the main timeline

Yes.

https://createjs.com/docs/easeljs/classes/EventDispatcher.html#method_removeEventListener

[SSSSSSBenay]

Thank you for the quick reply! Yes I have been trying this, but it seems that I am missing something in order to access the event listeners that were added within movieclips and submovieclips. Here is my situation:

The event listener that I want to remove is attached to a button called 'CodeButton' located within the movieclip 'CropPattern_group1'...

'CropPattern_group1' is located within the movieclip 'cropcircle_patterns_move'...

and 'cropcircle_patterns_move' is on the main timeline.

On the main timeline is a button 'nav_arrow_forward4'

This is the code I have in the main timeline associated with my forward button:

this.nav_arrow_forward4.addEventListener("click", Forward4);

function Forward4() {

exportRoot.cropcircle_patterns_move.CropPattern_group1.CodeButton.removeEventListener("click", SeeCode1);

exportRoot.gotoAndStop(1);

}

and this is the code located within the sub movieclip 'CropPattern_group1' associated with the event listener and the 'CodeButton':

this.CodeButton.addEventListener("click", SeeCode1);

function SeeCode1() {

function here....there are multiple things happening when CodeButton is clicked...;

}

When I run this and click 'nav_arrow_forward4' I get the error:  "ReferenceError: Can't find variable: SeeCode1"

[SSSSSSBenay]

ClayUUID​ I believe I was able to solve this issue by un-nesting all my event listeners are putting all the code on a frame of the main timeline. This is quite a time consuming task however, as I have many many movieclips and submovieclips involved in various games throughout my program...I am wondering if you could explain to me how to use your code above:

if (!bla.hasEventListener()) {

     bla.addEventListener("event", blaHandler);
}

Perhaps if I understand how to use the above, I could simply use this code within my nested movieclips to first check if event listeners already exist and then remove them that way...

[ClayUUID]

Sorry, the hasEventListener() call should include the type of event. hasEventListener("click"), etc.