javascript - c能否在我的脚本执行之前触发 DOM 事件？

Question

我有一个 video 元素和一个通过 jQuery 将 onplay 处理程序附加到视频的脚本:

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

根据 this answer,用户可能能够在加载脚本之前与视频播放器进行交互。但我需要确保在触发 onplay 事件之前附加了我的事件处理程序。

为了对此进行测试，我在调用 play() 的 video 之后添加了一个脚本。该处理程序在所有主要浏览器上运行，但 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') ) 并附加处理程序。