javascript - 使 JQuery 函数成为 Plain JS

Question

这个问题已经有答案了:

Uncaught TypeError: Object #<NodeList> has no method 'addEventListener' (3 个回答)

已关闭 8 年前。

嘿，我有以下函数，它在 JQuery 中运行得很好，但由于多种原因，我需要在纯 JS 中使用它。

$('audio').on("play pause ended", function () {
    document.title = document.title.replace("\u25B6", "")
    $("audio").each(function (index) {
        if (!this.paused) {
            document.title = "\u25B6 " + document.title.replace("\u25B6 ", "")
            return false;
        }
    })
});

我尝试将其转换为纯 JS(见下文)，但它只是出现以下错误:TypeError: undefined is not a function (evaluating 'sound.addEventListener')

var sound = document.getElementsByTagName('audio');
sound.addEventListener('play pause ended', function () {
    document.title = document.title.replace('\u25B6', '')
    sound.each(function (index) {
        if (!this.paused) {
            document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
            return false;
        }
    })
});

Answer 1

以下应该可以解决问题:

var sounds = document.getElementsByTagName('audio');
/* Loop through the nodelist - this is **not** an array */
for(var i = 0; i < sounds.length; i++){
    /* Get the item in your nodelist. This **is** an element. */
    var sound = sounds.item(i);
    /* Now add your event listener here - You can only add one at a 
     * time, though. So I decided to make the event a separate  
     * function and attach it multiple timers. */
    function eventHandler(){
        document.title = document.title.replace('\u25B6', '')
        if (!sound.paused) {
            document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
            return false;
        }
    }
    sound.addEventListener('play', eventHandler, false);
    sound.addEventListener('pause', eventHandler, false);
    sound.addEventListener('ended', eventHandler, false);
}

有两件事:document.getElementsByTagName 返回一个 HTMLNodeList，它不是一个数组。它可以循环，因为它有一个 length 属性，但它不能使用 forEach(因为它还有一个名为 item 的函数，用于获取位于提供的节点列表索引)。

其次，this 并不引用 forEach 中的项目，您需要将一个参数传递给您的 forEach 函数，您可以引用(又名 array.forEach(function(item){});，其中 item 将引用您的项目)。但正如我所说，这不会产生任何影响，因为 nodeList 不是数组。

已更新

我突然想到有一个简单的方法来附加所有事件，所以我对其进行了适当的修改。