Javascript 当视图被注入控制器时，如何从视图类中获取事件侦听器以引用控制器类中的方法？

我无法确定如何使视图中的事件侦听器引用控制器中的方法。我想在视图中分配所有侦听器，但在构造函数中这样做是吗

如何将侦听器绑定到控制器中的方法

类模型{
建造师（测试）{
这个。测试=测试；
}
}
类视图{
构造函数（元素）{
this.element=元素；
元素。addEventListener（'dragenter'，dragenter，false）；
元素。addEventListener（'drop'，drop，false）；
}
}
类控制器{
构造函数（企鹅视图、企鹅模型）{
this.penguinView=企鹅视图；
this.penguinModel=企鹅模型；
}
排水器（e）{
console.log（'enter'）；
}
下降（e）{
console.log（'drop'）；
}
}
函数就绪（）{
常量模型=新模型（）；
const targetElement=document.getElementById（'listOfPenguins'）；
常量视图=新视图（targetElement）；
常量控制器=新控制器（企鹅视图，企鹅模型）；
功能默认值（e）{
e、 预防默认值（）；
}
addEventListener（'dragleave'，preventDefault，false）；
window.addEventListener（'dragover'，preventDefault，false）；
addEventListener（'drop'，preventDefault，false）；
}
document.addEventListener（'DOMContentLoaded'，ready）

应用程序
也许可以朝这个方向思考

class View {
    constructor(element) {
        this.element = element;
    }

    dragEnterInit(fn) {
        element.addEventListener('dragenter', fn, false);
    }

    dropInit(fn) {
        element.addEventListener('drop', fn, false);
    }
}

class Controller {
    constructor(penguinView, penguinModel) {
        this.penguinView = penguinView;
        this.penguinModel = penguinModel;

        this.penguinView.dragEnterInit(this.dragEnter.bind(this));
        this.penguinView.dropInit(this.drop.bind(this));
    }

    dragEnter(e) {
        console.log('enter');
    }

    drop(e) {
        console.log('drop');
    }
}

通常，开发人员使用事件驱动的体系结构来触发事件并附加侦听器

让我们编写一个基本
EventEmitter
类：

class EventEmitter {
  constructor() {
    this._events = {};
  }

  trigger(eventName, eventData) {
    var handlers = this._events[eventName];
    if (handlers) {
      handlers.forEach(handler => handler.call(this, eventData));
    }
    return this;
  }

  on(eventName, eventHandler) {
    this._events[eventName] = this._events[eventName] || [];
    this._events[eventName].push(eventHandler);
    return this;
  }
}

从
EventEmitter
扩展
视图
：

class View extends EventEmitter{
  constructor(element) {
    super();
    this.element = element;

    element.addEventListener('dragenter', (evt) => this.trigger('dragenter', evt), false);
    element.addEventListener('drop', (evt) => this.trigger('drop', evt), false);
  }
}

让
控制器
在
视图
实例上绑定事件：

class Controller {
  constructor(penguinView, penguinModel) {
    this.penguinView = penguinView;
    this.penguinModel = penguinModel;

    this.penguinView
      .on('dragenter', this.dragEnter)
      .on('drop', this.drop);
  }

  dragEnter(e) {
    console.log('enter');
  }

  drop(e) {
    console.log('drop');
  }
}

谢谢你的帮助！只是有点太冗长了，我决定按照上面的建议添加事件发射器。谢谢！我成功了，但遇到了一个主要的绊脚石。我似乎无法在
控制器
类的
视图
中调用函数。如果我在视图中有一个名为
hello（）
的方法，在
Controller
中有一个名为
this.penguinView.hello（）的方法它显示
未捕获类型错误：无法读取未定义的属性“hello”