0

Is it possible to add an event listener and bind it to an instance of an Object (JS Class).

I'm writing a Parallax library for when a user hovers their mouse over a div, this part of my application works fine, but I want to be able to add a scroll event to the body to zoom the element as the user scrolls.

Inside of my JS Class I have:

var InteractiveParallax = function(props)  {
    this.initialise(props);
};

InteractiveParallax.prototype.initialise = function(props) {
    var _this = this;
    _this.state = {
        type : props.type,
        target : props.target,
        ... // Other state here
    };

    // I want to bind the event listener here
    window.addEventListener("scroll", _this.zoomElement);
};

// THE METHOD I WANT TO CALL WHEN SCROLLING
InteractiveParallax.prototype.zoomElement = function(e) {
    console.log(this.state);
    var elem = document.querySelector(this.state.target);
    if(elem) {
        var offsetTop = body.offsetTop;
        this.transitionElement();  // update the element
    }
};

Right now I am getting this.state.target is undefined within the .zoomElement function. I'm guessing that this is because the current state isn't bound to the scope of my object.

How can I bind to the context of this objects instance so that I can access state?

Halfpint
  • 3,967
  • 9
  • 50
  • 92
  • Answer is to use bind: `window.addEventListener("scroll", _this.zoomElement.bind(_this));`, in case you can't find it in that long-winded answer – bozdoz May 25 '16 at 13:05
  • Ahhh, I completely forgot about the `.bind` function, thankyou! – Halfpint May 25 '16 at 13:12

0 Answers0