Question

我在<head>中有以下代码：

var canplay = false;
if (window.addEventListener) {
    window.addEventListener('canplay', function(ev) {
        canplay = true;
    }, true);
}

后来我有一个addEventListener附加到视频，但它没有被触发，因为canplay已被解雇（并从上面的代码处理）。

没关系，但为什么我们将该事件监听器附加到window对象及其工作原理？

Answer 1

后来我有一个addEventListener附加到视频，但它没有触发

canplay事件不会持续发生。它只会在缓冲区准备好播放的时候触发。既然你说以后将一个监听器附加到视频对象上;也许你错过了事件被解雇的时间。但您可以随时通过video.readyState >= video.HAVE_FUTURE_DATA

查看

为什么我们将该事件监听器附加到窗口对象及其工作原理？

Spec允许它。

From W3C：所有HTML元素必须支持的事件处理程序（及其相应的事件处理程序事件类型），作为内容属性和IDL属性，以及Document和Window对象...
From Safari HTML5 Audio and Video Guide：您可以在媒体元素或其任何父元素上安装事件侦听器，直至并包括文档正文...