javascript - document.addEventListener 不适用于加载事件

Question

我正在寻找关于为什么 window.addEventListener 适用于以下脚本但不适用于 document.addEventListener 的解释。我看过MSN docs对于 load 事件，据我所知，它应该可以工作。另外，this堆栈溢出答案在某种程度上很有用，但鉴于我对上面链接的 MSN 文档的理解，我仍然感到困惑。这主要是因为没有引用窗口作为唯一可用的 EventTarget。

该脚本是个人项目的一部分，该项目旨在创建一个电唱机。单击一个按钮，歌曲就会播放，再次单击，歌曲就会暂停，依此类推。没什么太花哨的，但它也达到了我当前 js 技能水平的极限，所以任何建议都值得赞赏。

function audioPlayer(){

    // Create vars
    var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/336102/mpthreetest.mp3');
    var btn = document.getElementsByClassName('dial-a')[0];

    // Create event listener
    btn.addEventListener('click', playPause);

    // Play Pause function 
    function playPause(){

      // If audio paused then play on click
        if(audio.paused){
            audio.play();
       }
      // Else audio playing then pause on click
      else {
            audio.pause();
       }
    }
}

// document.addEventListener doesn't work for some reason
window.addEventListener('load', audioPlayer, false);

Answer 1

Mozilla 文档指出 document.addEventListener('load'... 不正确(我已更新它们)。该事件不会在 Edge、Chrome 或 Firefox 中触发。

以下内容与您的问题无关，但可能会让您感兴趣。

可以加载窗口，但音频文件尚不可用。您可能想使用音频元素 canplay专门针对您想做的事情的事件。