title: Correct way of using element.addEventListener
body: <p>I have a few JavaScript functions that behave as event listeners for an <code>&lt;object/&gt;</code> object which fires custom events. The object in question is the JavaScript API enabled YouTube player. The <a href="http://code.google.com/apis/youtube/js_api_reference.html" rel="nofollow">documentation</a> provides this example code for attaching event listener:</p>
  
  <pre><code>function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    // note: quotes used ----------------------^---------------------^
    // note: callback function defined in an arbitrary location
  }
  function onytplayerStateChange(newState) {
     alert("Player's new state: " + newState);
  }
  </code></pre>
  
  <p>However, according to the <a href="https://developer.mozilla.org/en/DOM/element.addEventListener" rel="nofollow"><code>addEventListener</code></a> examples I've seen elsewhere do not suggest using quotes:</p>
  
  <pre><code>function onytplayerStateChange(newState) {
     alert("Player's new state: " + newState);
  }
  function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    // note: callback function defined EARLIER
    ytplayer.addEventListener("onStateChange", onytplayerStateChange);
  }
  </code></pre>
  
  <p>So which method is right? The first one appeared to work in all browsers but recently I notice strange problems and I wonder if those problems are related with the way addEventListener is called.</p>