How to remove Event Listeners & Binding other class methods in JS using NPM OpenFl ES6

Hi,

So because of the NPM version of OpenFL , i decided to make a simple project using Javascript, which i never tried to use nor i got any chance to work in it for a complete project.

But now OpenFL is also available there and with the SWF library support which is the only reason :smiley: i motivated myself to make something using pure JS.

My simple project structure is like :

app.js
Main.js
SimpleView.js

Usually i add Event.ADDED_TO_STAGE event when ever i initialize a Sprite object.

So i added the event in every class which is extending the Sprite class :

Main.js

this.addEventListener(Event.ADDED_TO_STAGE, () => 
{
    console.log("MAIN ADDED");
});

SimpleView.js

this.addEventListener(Event.ADDED_TO_STAGE, () => 
{
    console.log("SIMPLE VIEW ADDED");
});

First problem :

when i add the SimpleView object in the Main class using:

const simpleView = new SimpleView();
this.addChild(simpleView); 

the simpleView object’s constructor is getting called twice one when it calls new keyword and when it is adding it to the display list.

when i removed Event.ADDED_TO_STAGE event from it’s SimpleView class constructor it was working as expected. calling it only once.

  • So how to remove the event listener once the object is added to the stage. ?
  • Because of this the simpleView constructor is being called before the Main object. the flow is getting out of order.

Second problem

How do i call the simpleView object methods from the Main class where it’s child is added.

after doing some googling i found that i need to bind the methods of the SimpleView class in the constructor like this:

this.kill = this.kill.bind(this);

but after adding this line in the constructor i am unable to access the kill method of the simpleView object.

image

so i am stuck here in simplest problem of JS :stuck_out_tongue: i am really excited about OpenFl npm package along with the SWF loading support it just opens another portal for me and to finally try the JS Mess.

thanks

Perhaps you could use a class-level method, I think that would allow you to add a this.removeEventListener reference within the method:

this_onAddedToStage = () => {
    console.log ("MAIN ADDED");
    this.removeEventListener (Event.ADDED_TO_STAGE, this.this_onAddedToStage);
};

Another thing to consider, when you add a class name in your new Stage, it adds your instance to the stage before your code is called. Therefore:

class Test {
    constructor () {
        console.log (this.stage != null); // true, already on stage
    }
}

var stage = new Stage (550, 400, 0xFFFFFF, Test);

If you prefer not to have it added, you could do something like this instead:

class Test2
    constructor () { 
        console.log (this.stage != null); // false, not added to stage yet
        this.addEventListener (Event.ADDED_TO_STAGE, () => {
            console.log (this.stage != null); // true, called after addChild
        });
    }
}

var stage = new Stage (550, 400, 0xFFFFFF);
stage.addChild (new Test2 ());
1 Like

After the recent update - both of my problems are solved.

any way i now know about the js modules and import export things ; what a mess :smiley:

Thank you :blush: