1

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

我一直在对 Clutter 和 Flash（非常相似的结构）的工作进行建模。“舞台”包含屏幕上的所有项目，即“DisplayObjects”。这些可以聚合在“DisplayObjectContainer”中，该“DisplayObjectContainer”继承自“DisplayObject”。“舞台”本身也是一个“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

我无法理解其中的一个方面，我无法判断是我自己还是我认为的不清楚：

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

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

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

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

4

1 回答 1

0

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

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

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

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

于 2012-08-14T23:06:22.033 回答