Javascript 一个gui的特定对象如何用于事件流？

我正在开发一个javascript框架，用于在html画布上创建简单的动画，其中包含使用基本复合模式的嵌套精灵

我一直在对杂乱和Flash（非常相似的结构）的工作进行建模。“阶段”保存屏幕上的所有项目，即“显示对象”。这些可以聚合到“DisplayObjectContainer”中，该容器继承自“DisplayObject”。“Stage”本身也是一个“DisplayObjectContainer”。所有这些都继承自“EventDispatcher”

在过去的几天里，我花了大部分时间阅读这些系统的事件流，并在各种开源项目中寻找示例

据我所知，当一个事件被调度时，它应该遵循一定的传播路径：它从阶段流向显示对象层次结构（“捕获”阶段），直到到达该事件的“目标”，然后“气泡”备份显示层次结构。如果这还不够清楚，这里的图片应该有助于解释：

这其中有一个方面我无法理解，我不知道这是否只是我自己，或者这是否像我认为的那样不清楚：

假设我在处理点击。我单击显示器并使用浏览器的本机事件处理来检索单击的x/y坐标，然后将其发送到显示器层次结构以确定我单击了哪个对象

直到现在，这是我代码中的“捕获”阶段。但这与文档中所说的目标在进入事件流时应该已经附加到事件上的说法完全不一致

我真的应该遍历我的显示项图表两次吗

---

非常感谢您对这个问题的任何建议或专业知识。

有趣的问题！是的，我相信在开始事件流的

捕获

阶段之前，您需要首先遍历

显示列表

来计算事件

目标

。我从未设计过事件系统，对此我并不完全确定，但当您计算

目标

对象时，您可以缓存分层路由并将其用作事件流的基础，而不是再次遍历

显示列表

你认为不清楚的是，如果你考虑的是实现，而不是抽象的设计事件系统（以及现有事件系统的术语）。想象一下，一个小部件由一个父对象和许多需要对鼠标点击做出反应的子项组成。您可能决定只侦听父对象上的事件，但根据事件起源的目标对象作出反应。在

ActionScript

中，如果您正在使用事件流的捕获阶段，则处理程序将在到达事件目标之前启动，但在本例中，目标是事件对象的基本属性

正如评论中所建议的，可能值得一看for，因为它声称提供了一个“Flash开发人员熟悉的”API。但是，请注意，出于性能原因，easeljs目前不支持功能齐全的事件流（请参阅）

---

我的两便士；事件流很难理解（更不用说设计了），实现一个功能齐全的事件系统可能与您创建轻量级库的目标不符。我建议您在此阶段保持简单，如果需要，只添加事件

冒泡等功能。
您这样做是为了学习吗？有很多现有的框架，比如easlejsa，这是一种学习体验（事件驱动编程对我来说总是有点模糊，理解底层行为会非常有用），主要是因为我想让它对于一个单独的项目来说非常轻量级。另外，谢谢，我将利用easelJS文档，第二个建议是你看一下easel，因为它是专门为画布开发提供类似Flash显示列表的功能而设计的（由一位前Flash开发人员设计的）目标根据事件传播的级别而变化-对于事件捕获和气泡阶段的每个步骤，目标始终是当前的DisplayObjectContainer，而不是leaf DisplayObject。我对这件事的理解太远了；出于某种原因，我认为目标始终应该是显示层次结构中的叶节点。也许其他地方的文档让我感到困惑。很高兴看到一个实际的、开放的实现，而不必对API进行反向工程。尽管如此，这次讨论肯定巩固了我对事件处理的总体理解。谢谢