时间戳

首页 > 解决方案 > 无法添加Eventlistner？

javascript - 无法添加Eventlistner？

问题描述

我似乎在将事件列表器添加到我的 YT.player 时遇到问题。

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 = [];

function onPlayerStateChange(event) {
    switch(event.data) {
        case YT.PlayerState.ENDED:
            alert('VIDEO IS ENDED');

        case YT.PlayerState.CUED:
            alert('VIDEO IS CUED');

        case YT.PlayerState.PAUSED:
            alert('VIDEO IS PAUSED'); 
            break;
    }
};

window.onYouTubeIframeAPIReady = function() {
    jQuery('iframe[src*="youtube.com"]').each(function() {
        var id = jQuery(this).attr('id');
        window.players[id] = new YT.Player(id);
        window.players[id].addEventListener('onStateChange','onPlayerStateChange');
    });
};

OnStateChange 没有被触发，但是

如果我在浏览器控制台中执行

window.players[id].addEventListener('onStateChange','test');
function test(event){alert(event.data)};

有用？

我不是在代码中做同样的事情吗？那么为什么它只能在控制台中工作？

标签： javascriptyoutube-api

解决方案

发生这种情况是因为addEventListener(<string>, <string>)它不是一个函数，如此处所述。

如您所见，关于该方法的第二个参数：

这必须是实现 EventListener 接口的对象或 JavaScript 函数。有关回调本身的详细信息，请参阅事件侦听器回调。

所以不接受字符串。可能您的意思是传递test函数变量引用，而不是test字符串。

因此，只需删除引号：

addEventListener('onStateChange', test);

注意：一些 javascript 函数也接受字符串代替函数，例如eval和setTimeout。但不鼓励使用

推荐阅读