三个 Js 事件处理层次结构

Question

我有很多实例化对象，它们都需要自己处理特定事件。

我有一个 class foo:

export default class Foo(){
    constructor(eventManager){//reference to an event manager class
       eventManager.eventPool.push(this.eventHandler)
       this.someProperty = 'hello world'
    }
    eventHandler(e){
       // logic to handle passed in event args
       console.log(this.someProperty) //any property I access is undefined, no matter what I try
    }

}

我有一个静态事件处理 class

export default class EventManager(){
  constructor(){
     this.eventPool = []
     window.addEventListener('mousemove', this.onMouseMove.bind(this), false)
  }
  onMouseMove(e){
    if(this.eventPool.length > 0){
      for(let i=0;i<this.eventPool.length; ++i){
        this.eventPool[i](e)
      }
    }
  }
}

然而，当我调用 class 的 eventHandler 并访问其属性时，它们是未定义的，我尝试将 eventHandler 绑定到 class 但这也不起作用。我不确定引用是如何处理的，因为 java-脚本不是静态类型的（本地）

这在 threejs 的上下文中用于抽象事件处理，以便能够以各种不同的方式处理用户在网格上的输入，s/other 场景中的棘手项目。我知道 three.js 的 EventDispatcher，但它没有给我足够的事件层次结构控制，我计划制作复杂的事件链，我希望在 class 中整齐地处理这些事件链不需要编辑源代码。

如何允许从管理所有对象函数引用的 class 调用自己的对象事件处理程序？在某个事件上？

Answer 1

我认为主要问题是

for(let evenHandler in this.eventPool)

this.eventPool是一个数组，for let eventHandler in只会得到数组的key或index，而不是value中的元素。试试 for let eventHandler of 或 let eventHandlerValue = this.eventPool[eventHandler].

Answer 2

我在阅读 three 的一些源代码时偶然发现了答案，并发现了类似的模式...

虽然解决方案是像我之前尝试的那样将函数绑定到实例，但必须在将它传递到数组时实际完成，而不是之前或之后。使用提供的示例，它看起来像这样....

export default class Foo(){
    constructor(eventManager){//reference to an event manager class
       eventManager.eventPool.push(this.eventHandler.bind(this))//bind the method while we pass it in
       this.someProperty = 'hello world'
    }
    eventHandler(e){ 
       console.log(this.someProperty) //now the function refrence will correctly access the instances properties
    }

三个 Js 事件处理层次结构

ThreeJs EventHandling Hierarchies

javascript

event-handling

dom-events

three.js