在我的腳本執行之前，DOM事件是否會觸發？

Question

我有一個video元素，並且通過jQuery附加一個onplay處理到視頻的腳本：

<video id="vid" /> 
<!-- ... --> 
<script type="text/javascript"> 
    $('#vid').on('play', function() { 
     $(this).addClass('playing'); 
    }); 
</script> 

根據this answer,用戶可能會被加載腳本之前與視頻播放器進行交互。但是我需要確保在觸發onplay事件之前，我的事件處理程序已連接。

爲了測試這個，我在video之後加了一個腳本，它調用了play()。該處理程序在所有主流瀏覽器上運行，除了WebKit，它根本不播放視頻。即使將jQuery語句包裝在$().ready()函數中，仍然可以在onplay之前附加處理程序。

是否保證我的腳本不會錯過任何來自HTML5視頻的事件？這同樣適用於所有DOM事件嗎？如果我將async添加到腳本怎麼辦？

Answer 1

中使用是可能的情況下，競爭狀態：

<video autoplay src="…"></video> 
<script>alert("wait!")</script> 
<script>$('video').on('play',…)</script> 

然而，該規範已被更改爲緩解這一問題。現在瀏覽器應該是queue firing of events until next event loop run，而不是立即開始。

如果腳本安裝事件處理程序是內嵌腳本緊隨<video>，無需等待爲domready中運行，然後比賽情況不會在兼容的瀏覽器發生。

如果您使用外部腳本或異步腳本，請等待DOMReady，使用setTimeout或同步XHR，那麼您可能會錯過這些事件，因爲這些事件可能會導致事件循環被處理（儘管我並不是100％確定網絡拖延允許瀏覽器處理事件循環）。

---

我不知道WebKit是否已更新以支持更安全的行爲。如果您還有問題，那麼你就可以使用，即使事件被立即解僱的工作方法：

1. 使用內聯事件處理程序：

   <video onplay="…"> 
   

2. 創建元素編程（document.createElement('video')）與處理器連接在它被插入到文檔之前。

Answer 2

確保使用RequireJS並確保在需要時按照正確順序嵌套或使用OrderPlugin for RequireJS的最佳方法。

現代化第一。