區分用戶觸發事件和代碼觸發事件

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」，任何感興趣的人都可以處理它。在這個模型中，你不依賴於事件冒泡，我認爲這很好。

這是回答您的問題嗎？