Как связать событие с ООП JS

Question

Как связать событие с ООП JS

1

Мне нужно связать событие Blur с методом с JS и получить данные объекта. Вот что я получил:

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();

Итак, это простой пример того, что мне нужно. У меня есть один вход, и когда я инициализирую класс, я связываю событие blur. Когда я пытаюсь это сделать, он просто показывает мне предупреждение, поэтому, похоже, он работает.

Однако, похоже, он не может получить доступ к области объекта, потому что он не возвращает мне this.objectTest объекта из области объекта.

Может кто-нибудь мне помочь? Спасибо

user3795437 16 июль 2018, в 16:25

Источник

0

.bind(this) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Или используйте функцию стрелки, которая примет область действия метода, в котором она была создана.
Shilly 16 июль 2018, в 14:25
3

это внутри обработчика событий не экземпляр вашего класса, а объект события.
Programmer 16 июль 2018, в 14:27
0

@Programmer: На самом деле это элемент DOM, с которым связан обработчик.
Felix Kling 16 июль 2018, в 18:58

Показать ещё 1 комментарий

Теги:

javascript

ecmascript-6

2 ответа

Ещё вопросы

.bind(this) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Или используйте функцию стрелки, которая примет область действия метода, в котором она была создана.
это внутри обработчика событий не экземпляр вашего класса, а объект события.
@Programmer: На самом деле это элемент DOM, с которым связан обработчик.

chŝdk · Answer 1 · 2018-07-16T12-47-00.000Z

Однако, похоже, он не может получить доступ к области объекта, потому что он не возвращает мне пример this.objectTest объекта из области объекта

Да, действительно, в addEventListener this относится к input которому вы прикрепляете событие, поэтому this.objectTest будет undefined, поскольку он не ссылается на objectTest объекта objectTest класса.

Что вам нужно сделать, это сделать ссылку на ваш класс 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;
}

Демо - версия:

Вот демо, показывающее, как это работает.

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" />

Simeon Smith · Answer 2 · 2018-07-16T12-46-00.000Z

Поскольку вы используете регулярную функцию в addEventListener, она восстанавливает это значение с помощью элемента inputTest. Вам нужно использовать функцию стрелки, чтобы сохранить это как объект класса. Как это:

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);
        });