javascript - 将所有事件从一个对象重定向到另一个对象

Question

我目前正在尝试用 vanilla javascript 为 Canvas 编写一个小型游戏引擎，在我目前关于它如何工作的心智模型中，用户将实例化一个 Scene 类，该类将包含所有要渲染的对象以及他们的行为。每个 Canvas 一次只能有一个事件场景，因此当前未加载的场景是不活动的。因此，我希望能够将所有发送到 Canvas 的事件重定向到当前事件的场景。它看起来像这样:

canvas.addEventListener(/* all */, (e) => activeScene.dispatchEvent(e));

但显然这是行不通的。

这里有一个类似问题的有趣答案:Listen for all events in JavaScript

这与遍历所有窗口属性并为所有以“on”开头的属性注册事件监听器类似。

问题是，这不会捕获自定义事件，我想让用户能够使用从其他地方发送的自定义事件与他们的场景进行交互(例如， Canvas 上方用于重置当前级别的按钮可以发送一个“重置”事件)。

备选方案是:

1. 用户在 Canvas 上调用自定义函数，然后在当前事件场景上调用适当的函数
2. 用户按我的想法调度了一个自定义事件，但还必须为该事件类型添加一个事件监听器并手动将事件重定向到事件场景(或者我提供一个函数来注册自定义事件并重定向此事件的事件输入事件场景)

在所有这些情况下，这对用户来说都是一个两步过程。我想在程序开始时将所有自定义事件注册一次并不会那么糟糕，但我想知道是否存在更优雅的解决方案。

Answer 1

好吧，经过一番修改后，我想出了一个解决方案:

我使用带有此代码的 eventListeners 重定向所有标准事件

for(let key in myObj){
    if(key.startsWith('on')) {
       myObj.addEventListener(key.slice(2), (e) => {otherObj.dispatchEvent(e)});
    }
}

并且我覆盖了默认的 dispatchEvent() 方法，以便所有手动触发的事件都被重定向，无论它们的类型如何:

myObj.dispatchEvent = (e) => {otherObj.dispatchEvent(e)};

不幸的是，第一部分是必要的，因为标准事件不是通过 dispatchEvent() 方法触发的。理论上，这应该将在对象(在我的例子中是 Canvas )上触发的所有事件重定向到另一个(事件场景)。