时间戳

首页 > 解决方案 > ThreeJs 事件处理层次结构

javascript - ThreeJs 事件处理层次结构

问题描述

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

我有一个类 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
    }

}

我有一个静态事件处理类

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

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

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

如何允许从管理所有对象函数引用的类中调用自己的对象 eventHandlers？在某个事件上？

标签： javascriptthree.jsevent-handlingdom-events

解决方案

我认为主要问题是

for(let evenHandler in this.eventPool)

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

推荐阅读