Highlighted

Using 'on' and 'off' with respect to 'addEventListener' and 'removeEventListener'

Engaged ,
Mar 12, 2019

Copy link to clipboard

Copied

Hi,

I can’t seem to get on and off working in respect of addEventListener and removeEventListener.

Here is my simple code as example:

var me = this;

this.btn1.on("click", btn1Click);

this.btn1.on("mouseover", btn1Over);

this.btn1.on("mouseout", btn1Out);

function btn1Click(){

removeEvents();

//code does other stuff

}

function btn1Over(){

// code for over state

}

function btn1Out(){

//code to resume button to normal state

}

function removeEvents(){

me.btn1.off("mouseout", btn1Out);

}

The off does not work in the removeEvents() function. But when I try the code…

var me = this;

this.btn1.addEventListener("click", btn1Click);

this.btn1.addEventListener("mouseover", btn1Over);

this.btn1.addEventListener("mouseout", btn1Out);

function btn1Click(){

removeEvents();

//code does other stuff

}

function btn1Over(){

// code for over state

}

function btn1Out(){

//code to resume button to normal state

}

function removeEvents(){

me.btn1.removeEventListener("mouseout", btn1Out);

}

This works! I’d like to know how I am using on and off in place of addEventListener and removeEventListener incorrectly?

I have looked and tried to understand the instructions on the CreateJS site but as I am not a strong programmer it is going over my head.

Cheers!

Hi Gory

in order to use on and off to add and remove eventHandlers, so to speak, you have to wrap the on Handler into a variable like this

var btn1ClickWrapper = this.btn1.on("click", btn1Click);

then you can remove the handler using the wrapper like this:

this.btn1.off("click", btn1ClickWrapper);

See also here: EaselJS v1.0.0 API Documentation : MovieClip

Klaus

TOPICS
Discussions

Views

253

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

Using 'on' and 'off' with respect to 'addEventListener' and 'removeEventListener'

Engaged ,
Mar 12, 2019

Copy link to clipboard

Copied

Hi,

I can’t seem to get on and off working in respect of addEventListener and removeEventListener.

Here is my simple code as example:

var me = this;

this.btn1.on("click", btn1Click);

this.btn1.on("mouseover", btn1Over);

this.btn1.on("mouseout", btn1Out);

function btn1Click(){

removeEvents();

//code does other stuff

}

function btn1Over(){

// code for over state

}

function btn1Out(){

//code to resume button to normal state

}

function removeEvents(){

me.btn1.off("mouseout", btn1Out);

}

The off does not work in the removeEvents() function. But when I try the code…

var me = this;

this.btn1.addEventListener("click", btn1Click);

this.btn1.addEventListener("mouseover", btn1Over);

this.btn1.addEventListener("mouseout", btn1Out);

function btn1Click(){

removeEvents();

//code does other stuff

}

function btn1Over(){

// code for over state

}

function btn1Out(){

//code to resume button to normal state

}

function removeEvents(){

me.btn1.removeEventListener("mouseout", btn1Out);

}

This works! I’d like to know how I am using on and off in place of addEventListener and removeEventListener incorrectly?

I have looked and tried to understand the instructions on the CreateJS site but as I am not a strong programmer it is going over my head.

Cheers!

Hi Gory

in order to use on and off to add and remove eventHandlers, so to speak, you have to wrap the on Handler into a variable like this

var btn1ClickWrapper = this.btn1.on("click", btn1Click);

then you can remove the handler using the wrapper like this:

this.btn1.off("click", btn1ClickWrapper);

See also here: EaselJS v1.0.0 API Documentation : MovieClip

Klaus

TOPICS
Discussions

Views

254

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
Mar 12, 2019 0
Adobe Community Professional ,
Mar 12, 2019

Copy link to clipboard

Copied

I wonder if just using mouseEnabled = false or mouseEnabled = true; would not be simpler.

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
Reply
Loading...
Mar 12, 2019 0
Engaged ,
Mar 12, 2019

Copy link to clipboard

Copied

Hi res,

that's what I usually use that works but just wondered if there was something I was doing wrong with the on and off events? I thought they acted like addEventListener and removeEventListener respectively? Just wanted to understand them better.

Cheers!

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
Reply
Loading...
Mar 12, 2019 0
Adobe Community Professional ,
Mar 12, 2019

Copy link to clipboard

Copied

As far as I know, .off() is jquery so you would need to have jquery loaded for it to work.

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
Reply
Loading...
Mar 12, 2019 0
Advocate ,
Mar 12, 2019

Copy link to clipboard

Copied

Hi Gory

in order to use on and off to add and remove eventHandlers, so to speak, you have to wrap the on Handler into a variable like this

var btn1ClickWrapper = this.btn1.on("click", btn1Click);

then you can remove the handler using the wrapper like this:

this.btn1.off("click", btn1ClickWrapper);

See also here: EaselJS v1.0.0 API Documentation : MovieClip

Klaus

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
Reply
Loading...
Mar 12, 2019 1
GoryGreg LATEST
Engaged ,
Mar 13, 2019

Copy link to clipboard

Copied

Thanks Klaus.

Your simple and clear breakdown really helped, as I had looked at that documentation at some point before but it just wasn't clicking with me.

Cheers

Greg

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
Reply
Loading...
Mar 13, 2019 0