How to Bind Event with OOP JS

Question

I need to bind a Blur event into a Method with JS, and retrieve the object data. That's what I got:

class TestClass {
    constructor(input) {
        this.inputTest = input;

        this.objectTest = {
            1: "one",
            2: "two",
            3: "three"
        }

        this.isBinded = false;
    }

    test() {
        if(!this.isBinded) {
            this.inputTest.addEventListener("blur", function( event ) {
                alert("Test Event");

                // I need to access to Object Scope, but seems not to be working
                console.log(this.objectTest);
            });
        }

        this.isBinded = true;
    }
}

var test = new TestClass(document.querySelector("input"));
test.test();

So, this is a simple example of what I need. I have one input, and when I initialize the class, I bind a blur event. When I try it, it just shows me the alert, so apparently looks to work.

However, it seems it cannot access into the object scope, because it doesn't return me the this.objectTest object example from the object scope.

Can anyone help me? Thanks

`.bind(this)` https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind Or use an arrow function, which will take the scope of the method it was created in. — Shilly, Jul 16 '18 at 14:25
this inside the event handler is not the instance of your class, but the event object. — Programmer, Jul 16 '18 at 14:27
@Programmer: It's actually the DOM Element the handler is bound to. — Felix Kling, Jul 16 '18 at 18:58

score 0 · Answer 1 · answered Jul 16 '18 at 14:29

Because you're using a regular function in the addEventListener it is rebinding this to the inputTest element. You need to use an arrow function to keep this as your class object. Like this:

this.inputTest.addEventListener("blur", ( event ) => {
            alert("Test Event");

            // I need to access to Object Scope, but seems not to be working
            console.log(this.objectTest);
        });

score 0 · Answer 2 · answered Jul 16 '18 at 14:40

However, it seems it cannot access into the object scope, because it doesn't return me the this.objectTest object example from the object scope

Yes, indeed inside the addEventListener callback, this refers to the input that you are attaching the event to, so this.objectTest will be undefined, as it's not referring your class's objectTest property.

What you need to do is to make a reference to your class this, so you can access it inside the callback, you can assign it to another variable like this:

test() {
 var _self = this;
    if(!this.isBinded) {
        this.inputTest.addEventListener("blur", function( event ) {
            alert("Test Event");

            // I need to access to Object Scope, but seems not to be working
            console.log(_self.objectTest);
        });
    }

    this.isBinded = true;
}

Demo:

Here's a Demo showing how it works.

class TestClass {
  constructor(input) {
    this.inputTest = input;

    this.objectTest = {
      1: "one",
      2: "two",
      3: "three"
    }

    this.isBinded = false;
  }



  test() {
    var _self = this;
    if (!this.isBinded) {
      this.inputTest.addEventListener("blur", function(event) {
        alert("Test Event");

        // I need to access to Object Scope, but seems not to be working
        console.log(_self.objectTest);
      });
    }

    this.isBinded = true;
  }
}

var test = new TestClass(document.getElementById("js-test"));
test.test();

Check it : <input id="js-test" />

How to Bind Event with OOP JS

2 Answers2