javascript - 如何针对事件流定位 GUI 的特定对象？

Question

我正在开发一个 JavaScript 框架，用于使用基本的复合模式在带有嵌套 Sprite 的 html Canvas 上创建简单的动画。

我一直在 Clutter 和 Flash(非常相似的结构)上对我的作品进行建模。 “舞台”保存屏幕上的所有项目，即“显示对象”。这些可以聚合在继承自“DisplayObject”的“DisplayObjectContainer”中。 “Stage”本身也是一个“DisplayObjectContainer”。所有这些都继承自“EventDispatcher”。

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

据我了解，当事件被调度时，它应该遵循一定的传播路径:它从舞台流入显示对象层次结构(“捕获”阶段)，直到到达该事件的“目标” ，然后“冒泡”备份显示层次结构。如果这还不够清楚，此处的图像应该有助于解释:

http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e4f.html

http://docs.clutter-project.org/docs/clutter/1.4/event-flow.png

其中有一个方面我无法理解，我无法判断这是否只是我的问题，或者是否像我认为的那样不清楚:

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

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

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

任何有关此问题的建议或专业知识将不胜感激。

Answer 1

有趣的问题!是的，我相信您需要先遍历 DisplayList 来计算事件目标，然后再开始事件流的捕获阶段。从未设计过事件系统，我对此并不完全确定，但也许当您计算 target 对象时，您可以缓存分层路由并将其用作事件流的基础，而不是再次遍历 DisplayList。

我认为，如果您从实现 Angular 考虑而不是从设计事件系统(以及现有事件系统的术语)的抽象 Angular 考虑，那么您不清楚的地方会更明显。想象一下，一个小部件由一个父对象和许多需要对鼠标单击使用react的子项组成。您可能决定只监听父对象上的事件，但根据事件源自的目标对象使用react。在 ActionScript 中，如果您使用事件流的捕获阶段，则处理程序将在到达事件目标之前触发，但在这种情况下，目标是事件流的基本属性事件对象。

正如评论中所建议的，可能值得查看 source code对于 easeljs因为它声称提供“Flash 开发人员熟悉的 API”。但是，请注意，出于性能原因，easeljs 目前不支持全功能事件流(请参阅 here )。

我的两便士；事件流很难理解(更不用说设计)，并且实现功能齐全的事件系统可能与您创建轻量级库的目标不一致。我建议您在此阶段保持简单，仅在您发现需要时才添加事件冒泡等功能。