如何针对事件流的 GUI 的特定对象

How does one target specific object of a gui for an event flow?

本文关键字：GUI 对象何针事件更新时间：2023-09-26

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

我一直在对杂乱和闪光（非常相似的结构）进行建模。"舞台"包含屏幕上的所有项目，即"显示对象"。这些可以聚合到"DisplayObjectContainer"中，该容器继承自"DisplayObject"。"Stage"本身也是一个"DisplayObjectContainer"。所有这些都继承自"事件调度程序"。

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

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

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 坐标，然后将其向下发送到显示层次结构以确定我单击了哪个对象。

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

。

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

如能就此问题提供任何建议或专门知识，将不胜感激。

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

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

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

我的两分钱;事件流很难理解（更不用说设计了），实现一个功能齐全的事件系统可能与你创建一个轻量级库的目标不一致。我建议您在此阶段保持简单，并且仅在发现需要时才添加事件bubbling等功能。