区分用户触发事件和代码触发事件

Question

我有一个包含视频的组件：<div class="component"><video src="..." /></div>。

现在我要管理两种方式的再生的状态：

1. 监听，可以通过点击本地播放/暂停按钮，可以改变播放状态做的东西与它（改变部件的布局，通知其他组件......）

2. 从外部手动触发播放经由让说myComponent.playContent()

我不知道如何正确管理。例如，当用户单击本机视频控件时，将调度play事件。当我手动调用myComponent.playContent()这就要求domVideo.play()的play事件也出动，所以如果我只是听为play事件它被等混淆或叫了两声。

的问题是两个不同的东西在这里混合。

第一个，播放开始可以通过用户点击本机控件触发，在这种情况下，我想捕捉事件并做所有事情。这是典型的“冒泡”，顺流流。

二，则程序 - 通常组件 -要触发播放的“自上而下”的方式，在这里我想区分触发的事件，以避免把它当作用户创建播放事件。

我曾多次遇到这个问题，例如在ExtJS的选项卡面板（tabchange事件）中改变tab的事件，我不知道如何在基于事件的编程范例中解决这个问题。

我正在寻找一个通用的解决方案或正确的做法。它不仅关于本地DOM事件。我有一个YT.Player（YouTube播放器）对象，其自己的事件具有相同的模型，并且我遇到了同样的问题。

编辑：一些技巧与setTimeout和取消是可能的，但我想避免这种情况。

Answer 1

我不知道具体的DOM，但让我告诉你它是如何在的Flex/Flash播放器，这也是客户端，基于事件的运行/编程模式工作。

因此，让我们有一个成分C（例如，从例如视频播放器）和应用程序A - 简单的东西，包含您的组件（可能是一个子应用，应用模块等;让我们就叫它应用）。

组件的公共API是这样的：

component VideoPlayer 
    function play() 
    event playStateChange 

我将介绍两种情况，一是没有一个MVC框架（“裸骨”的解决方案）和一个与地方的MVC框架。

1）没有任何的MVC框架

应用程序需要具有对组件的引用，并呼吁像这样的地方：

videoPlayer.addEventListener("playStateChange", function() {...}) 

如果需要启动上VideoPlayer播放，它只会叫

videoPlayer.play(); 

很简单。 （我不明白你在问题底部描述的问题，也就是为什么调用play（）应该再次调度相同的事件 - 在Flex中，程序员需要明确地做到这一点，它可能是一个错误;当然，它可能是在必要时感觉派遣不同命名的事件，但是这是另一回事）

2）随着MVC框架

Flex应用程序通常具有独立的深层嵌套层次相当大屏幕，内容窗格，容器，组件等，因此应用程序可能不直接引用应用程序中的所有组件。因此，MVC框架（没有正确命名，但让我们把它放在一边......）通常提供一个中央事件总线，应用程序的不同部分可以通过该总线进行通信。所以有了这个框架，在应用程序中的任何地方的任何代码可以做这样的事情：

eventBus.dispatchEvent("globalPlayEvent") 

和组分（的VideoPlayer）的实例化过程中会做这样的事情：

eventBus.addEventListener("globalPlayEvent", function() { 
    play(); 
} 

通信在相反的方向将是类似的 - 组件只会在一些全局事件派发/事件总线上派发“playStateChange”，任何感兴趣的人都可以处理它。在这个模型中，你不依赖于事件冒泡，我认为这很好。

这是回答您的问题吗？