How to remove addEventListener when jumping between frames?

Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

Hi, I seem to have trouble removing addEventListeners when I jump between frames. When I jump back and forth, the addEventListeners still seem to stack up:

 

removeEvtList.gif

 

Frame 1 code:

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward() {
	this.arrowForward_btn.removeEventListener("click", arrow_btnClickForward.bind(this));
	console.log("went forward");
	alert("alert: went forward!");
	this.gotoAndStop(1);
}

 

Frame 2 code:

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack() {
	this.arrowBack_btn.removeEventListener("click", arrow_btnClickBack.bind(this));
	console.log("went back!");
	alert("alert: went back!");
	this.gotoAndStop(0);
}

 

How do I remove the addEventListeners so that they don't stack up?

TOPICS
Code , How to

Views

59

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Mar 17, 2022 Mar 17, 2022
.bind() returns a new, unique function reference every time it's called on a function, so of course you can't use it with removeEventListener(). Since you're attempting to remove the event inside its own event handler, you can use evt.remove() https://www.createjs.com/docs/easeljs/classes/Event.html Or, instead of using .addEventListener(), you could just use .on() with the once flag. https://www.createjs.com/docs/easeljs/classes/EventDispatcher.html#method_on

Likes

Translate

Translate
Adobe Community Professional ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

.bind() returns a new, unique function reference every time it's called on a function, so of course you can't use it with removeEventListener().

 

Since you're attempting to remove the event inside its own event handler, you can use evt.remove()

https://www.createjs.com/docs/easeljs/classes/Event.html

 

Or, instead of using .addEventListener(), you could just use .on() with the once flag.

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

LATEST

Thanks! evt.remove(); works great after I added it into the functions.

 

Frame 1 code:

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward(evt) {
	console.log("went forward");
	alert("alert: went forward!");
	this.gotoAndStop(1);
	evt.remove();
}

Frame 2 code:

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack(evt) {
	console.log("went back!");
	alert("alert: went back!");
	this.gotoAndStop(0);
	evt.remove();
}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines