create listener between objects javascript

Question

I'm using Mootools and I have two classes (class1, class2), class2 is used in class1

class2 get two methods (func1, func2)

func1 is used to display elements and is call in class1

func2 is used is one of the func1 displayed element is clicked.

I'd like to get an event in class1 if func2 is called but I don't know how.

Thanks for your help.

Edit: some code example

var Class1 = function(){
    var class2 = new Class2();
    class2.func1();
    class2.onElementsHide(function(){
        alert('elements are invisibles !!')
    });
}

var Class2 = function(){
    this.func1 = function(){
        //show elements
        elementOnClick(this.func2)
    }

    this.func2 = function(){
        //hide elements
    }

    this.onElementsHide = function(callback){
        //trigger callback when func2 is used
    }

}

It's really hard to know how to help you adjust your code when you haven't posted any. Can you add a short bit of the problem code and say which lines don't work like you want? — Alex Wayne
– Alex Wayne, Commented Jan 21, 2014 at 20:27
I add a little code to explain, I'd like to know how to trigger my callback in onElementsHide when finch is called — Ajouve
– Ajouve, Commented Jan 21, 2014 at 20:35
just put "this.onElementsHide()" inside this.func2(), and "callback()" inside this.onElementsHide(). — dandavis
– dandavis, Commented Jan 21, 2014 at 20:40
@dandavis sorry I don't really understand, if I put this.onElementsHide() in this.func2() nothing will be trigger in class1 — Ajouve
– Ajouve, Commented Jan 21, 2014 at 20:53

Patrick Evans · Accepted Answer · 2014-01-21 20:59:43Z

Take a look at MDN's article about creating and triggering events

Basically do something like the following:

var Class1 = function(){
    var class2 = new Class2();
    class2.func1();
    class2.onElementsHidden(function(){
        alert('elements are invisibles !!')
    });
}

var Class2 = function(){

    //Create a custom event
    var ElementsHiddenEvent = new Event("ElementsHidden");

    this.func1 = function(){
        //show elements
        elementOnClick(this.func2)
    }

    this.func2 = function(){
        //hide elements
        //Dispatch the event
        document.dispatchEvent(ElementsHiddenEvent);
    }

    //Sets a listener for the event
    this.onElementsHidden = function(callback){
       //make sure the callback is a function
       if(typeof(callback)!=="function") return;
       //Set a listener for the custom event, and set it to execute callback
       document.addEventListener("ElementsHidden",callback);
    }

}

Bill Effin Murray · Accepted Answer · 2014-01-21 21:01:16Z

1

You mean this?

var Class1 = function(){
    var class2 = new Class2();
    class2.func1();
    class2.onElementsHide(function(){
        alert('elements are invisibles !!')
    });
}

var Class2 = function(){

    this.cb = function(){};

    this.func1 = function(){
        //show elements
        elementOnClick(this.func2)
    }

    this.func2 = function(){
        //hide elements
        this.cb(); //<<Added
    }

    this.onElementsHide = function(callback){
        //trigger callback when func2 is used
        this.cb = callback; /// <<Added
    }

}

edited Jan 21, 2014 at 21:01

answered Jan 21, 2014 at 20:55

Bill Effin Murray

4361 gold badge5 silver badges13 bronze badges

1 Comment

Ajouve Over a year ago

In this case callback will be executed directly after using onElementsHide, I want to trigger my callback when func2 is executed

Collectives™ on Stack Overflow

create listener between objects javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related