Question

I have a few JavaScript functions that behave as event listeners for an <object/> object which fires custom events. The object in question is the JavaScript API enabled YouTube player. The documentation provides this example code for attaching event listener:

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);
}

However, according to the addEventListener examples I’ve seen elsewhere do not suggest using quotes:

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);
}

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.

Answer 1

Since the addEventListener method is actually a method exposed in the flash player and not the native addEventListener, it really depends on the implementation of the AS3 code inside the YTPlayer.

I would go with the documentations and use the quotes