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

[GoryGreg]

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!

[resdesign]

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

[GoryGreg]

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!

[resdesign]

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

[kdmemory · Accepted solution]

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

[GoryGreg]

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