I am facing the challenge of managing multiple instantiated objects, each requiring its own handling of a specific event.
Let's consider a class named "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 arguments
console.log(this.someProperty); //any property I access is undefined, regardless of my efforts
}
}
In addition, there is a static event handling 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);
}
}
}
}
Despite trying various approaches such as binding the eventHandler function to the class, when I attempt to call the eventHandler of a class and access its properties, they remain undefined. The dynamic nature of JavaScript, being untyped by default, adds complexity to the reference handling process.
This issue arises in the context of using Three.js to abstract event handling for user input on interactable items within a scene. While Three.js provides an EventDispatcher, it does not offer sufficient control over the event hierarchy. My goal is to construct intricate event chains that can be neatly managed within a class without requiring direct modifications to the source code.
How can I enable individual object instances to have their eventHandlers called from a central class managing all the references upon a specific event?