2

I'm looking for an explanation as to why window.addEventListener works on the following script but not document.addEventListener. I've had a look at the MSN docs for the load event and from what I can gather it should work. Also, this stack overflow answer was useful up to a point but given my understanding of the MSN docs linked above I'm still confused. This is mainly because there is no reference to window being the only available EventTarget.

The script is part of a personal project which is to create a record player. Click a button and the song plays, click again and it pauses and so on. Nothing too fancy but it's also at the limits of my current js skill level so any advice is appreciated.

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);
Community
  • 1
  • 1
Luke
  • 67
  • 7
  • 3
    Even the MDN page you linked to says, _"Note: More reliable is to add event listener on "window.addEventListener"."_ – CBroe Aug 10 '16 at 22:17
  • This behaviour corresponds to the old school `window.onload = ...` - I've never seen `document.onload = ...`. – nnnnnn Aug 10 '16 at 22:24
  • Good spot but that doesn't answer my question. Let's pretend for whatever reason I did want to use document.addEventListener. Or is this not possible? – Luke Aug 10 '16 at 22:26
  • Well obviously it isn't possible, because when you tried it it didn't work, and even if it worked in browser X, as per the MDN quote in CBroe's comment it would be less reliable than `window.addEventListener`. Why would you want to use something known to be unreliable when `window.addEventListener` works fine? – nnnnnn Aug 10 '16 at 22:29
  • If you got your heart set on using `document`, try `document.documentElement.addEventListener('load', ....` – zer00ne Aug 10 '16 at 22:50
  • Being new to js I don't have an answer to that. I had thought it possible that there could a scenario in which it was used. Besides this, the note in the MDN page does pose the question, "more reliable than what?". I'm just trying to get a handle on js. So if this is a non-issue then I can happily use window.addEventListener. – Luke Aug 10 '16 at 22:54

1 Answers1

2

The Mozilla docs stating document.addEventListener('load'... were incorrect (I have updated them). That event doesn't fire in Edge, Chrome or Firefox.

The following isn't related to your question, but it might be of interest.

The window can be loaded but the audio file not available yet. You may want to use the audio element canplay event which is quite specifically targeted to what you want to do.

David Gilbertson
  • 4,219
  • 1
  • 26
  • 32