在嵌套的div中添加eventlistner

Question

我当前有som youtube视频，由Tealium提供的脚本对其进行跟踪

// Tealium Tracking Code for YouTube iframe embeds
//
// Read the identifiers on the YouTube iframes. If not present, then add ids
if (jQuery('iframe[src*="youtube.com"]').length > 0) {
 var i = 0, id;
 window.iframe_id = [];
 jQuery('iframe[src*="youtube.com"]').each(function() {
   if (jQuery(this).attr('id')) {
     id = jQuery(this).attr('id');
     window.iframe_id.push(id);
   } else {
     id = 'tealium_youtube' + i;
     jQuery(this).attr('id', id);
     window.iframe_id.push(id);
     i++;
   }
 });
}

// Configure Milestones
//
function setMileStones(i) {
  // Set the intervals here as you want them reported, in % viewed, each number separated by a comma
  // If you do not want mileStones set mileStones[i] = [] ;
  mileStones[i] = [10, 25, 50, 75, 90];
}
var mileStones = [];
for (i = 0; i < window.iframe_id.length; i++) {
  setMileStones(i);
}

// Load the YouTube iframe library
//
var ytapi = document.createElement('script');
ytapi.src="https://ww" + "w.youtube" + ".com/iframe_api";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(ytapi, scriptref);

window.players = [];
window.onYouTubeIframeAPIReady = function() {
  // Confirm existing ID or set ID in the iframe for each video on the page
  jQuery('iframe[src*="youtube.com"]').each(function() {
  var id = jQuery(this).attr('id');
  window.players[id] = new YT.Player(id, {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
      }
    });
  });
};

window.start = [];
window.onPlayerReady = function(event) {
 //Log that the video is ready/open
 var idx;
 for (i = 0; i < window.iframe_id.length; i++) {
   if (window.iframe_id[i] === event.target.a.id) {
     idx = i;
   }
   window.start.push(true);
 }
 if (event.target.getPlayerState() === YT.PlayerState.CUED) {
   var player = event.target;
   utag.link({
     tealium_event: 'video_load',
     video_id: player.j.videoData.video_id,
     video_length: player.getDuration(),
     video_name: player.j.videoData.title,
     video_platform: 'YouTube'
   });
  }
};

var playerCheckInterval;

window.onPlayerStateChange = function(event) {
 player = event.target;
 var playhead, idx;
 for (i = 0; i < window.iframe_id.length; i++) {
   if (window.iframe_id[i] === event.target.a.id) {
     idx = i;
   }
 }

 tealium_event = "";

 if (event.data == YT.PlayerState.PLAYING) {
   if (start[idx]) {
     if (mileStones[idx].length > 0) {
       playerCheckInterval = setInterval(mileStoneCheck, 50);
     }
     tealium_event = "video_start";
   } else {
     //This will catch when the video playback is changed from not playing to playing
     tealium_event = "video_play";
     playhead = player.getCurrentTime().toString();
   }
   start[idx] = false;

 } else if (event.data == YT.PlayerState.PAUSED) {
   tealium_event = "video_pause";
   playhead = player.getCurrentTime().toString();

 } else if (event.data == YT.PlayerState.ENDED) {
   if (mileStones[idx].length > 0) {
     clearInterval(playerCheckInterval);
     // reset in case visitor replays the video
     playerCheckInterval = 0;
     setMileStones(idx);
   }
   tealium_event = "video_complete"; // utag
 }

 if (tealium_event) {
   utag.DB("Video event: " + tealium_event + ", video ID: " + window.iframe_id[idx]);
   utag.link({
     tealium_event: tealium_event,
     video_playhead: parseInt(playhead),
     video_id: player.j.videoData.video_id,
     video_length: player.getDuration(),
     video_name: player.j.videoData.title,
     video_platform: 'YouTube'
   });
 }

  function mileStoneCheck() {
    var idx;
    for (i = 0; i < window.iframe_id.length; i++) {
      if (window.iframe_id[i] === player.a.id) {
        idx = i;
      }
    }
    var duration = player.getDuration();
    var playhead = player.getCurrentTime();
    var percComplete = (playhead / duration) * 100;
    var ms_len = mileStones[idx].length;
    if (ms_len > 0) {
      var next_ms = mileStones[idx][0];
      if (next_ms <= percComplete) {
        mileStones[idx].shift();
        utag.DB("Video event: video_milestone, video ID: " + window.iframe_id[idx] + ", Milestone=" + percComplete.toFixed());
        utag.link({
          tealium_event: 'video_milestone',
          video_playhead: parseInt(playhead),
          video_id: player.j.videoData.video_id,
          video_length: parseInt(duration),
          video_milestone: next_ms.toString(),
          video_name: player.j.videoData.title,
          video_platform: 'YouTube'
        });
      }
    }
  }
};

我不能修改此脚本，就是这样，如果我必须做点什么，我必须在外面做。

我需要跟踪变量player.j.playerState，该变量为我提供了当前跑步者的状态。

这些播放器是在html中添加的

<div id="playerDiv">
<div style="...">
<iframe> </iframe>
</div>
</div>

player仅在某人启动播放器时可用，这意味着我无法在window.onload上添加eventListner，因为player不存在，因此我需要以某种方式添加单击某人时的EventListner div元素playerDiv，因为这样我就可以确定player变量存在，并且我可以访问它的值进行监视-因此我尝试了类似的操作

window.onload = function() {

if (document.getElementById("playerDiv")
{
   console.log("yes");
   document.getElementById("playerDiv").addEventListner("click",function ()   {
console.log("clicked");
});
}
else
{
 console.log("no");
}

};

但是我在控制台中看不到单击的消息吗？但是为什么呢？