.off() doesn't remove .on() event listeners

[Tymski]

I'm debugging memory leaks in my pixi application. And i stumbled on this beauty:

sprite = new PIXI.Sprite();
sprite.on('pointerdown',function(){});
sprite.off();

And:

sprite._events
>> Object { pointerdown: Object }

sprite._events has pointerdown event listener even after I deleted it with off(). Why???

 

 

[Tymski]

Quote

Calling .off() with no arguments removes all handlers attached to the elements.

but it doesn't work.

Found this instead:

sprite.removeAllListeners(); 

which works.

[alex_h]

.off has the same signature as .on does. So you have to pass the event id and a reference to the same function instance that you passed to the .on function. In your example code that would not even be possible because you have used an anonymous function which you defined within the call to .on itself. If you want to remove the event listener later then you definitely don't want to use that approach! You need to define the listener function elsewhere and have a way of referencing it either by name or through assigning it to a variable. Then pass that reference to both the .on and the .off calls. 

Pixi uses EventEmitter3 for event handling so you can easily check the source code to confirm that this is the way it works:

https://github.com/primus/eventemitter3/blob/master/index.js#L236

So your example code needs to be like this:

const sprite = new PIXI.Sprite();
const eventHandler = function(){};
sprite.on('pointerdown', eventHandler);
sprite.off('pointerdown', eventHandler);

 

[Tymski]

ok I confused with jquery .on() and .off() and assumed it works the same

[xerver]

5 hours ago, Tymski said:

ok I confused with jquery .on() and .off() and assumed it works the same

It is modeled after the node event emitter system, not the DOM event system or jQuery's event system.

[Tymski]

Thanks