Question

我正在写一个愚蠢的页面，其中我有5个名为myAudio1 thru myAudio5的音频元素，我想在播放/结束每个音频时显示hello / goodbye消息。

我当前（当然不是最好的）方法是为每个音频标签提供一个JavaScript代码段:(这是第一个）

var aud1 = document.getElementById("myAudio1");
aud1.onplay = function() {
console.log("myAudio1 says hello");
};
aud1.onended = function() {
console.log("myAudio1 says goodbye");
};

所以我有五个带有自己标识符的片段，一直到myAudio5。
显然这是一个漫长而繁琐的方法，所以我试图简化它并想出了这个：

var audList = document.getElementsByTagName("audio");
console.log(audList.length);
for (var i = 0; i < audList.length; i++) {
  audList[i].addEventListener("load", audCheck, false);
}

function audCheck(e) {
    var aud = e.target;
    var audID = e.target.id;
    aud.onplay = function() {
        console.log(audID+" says hello");
    };
    aud.onended = function() {
        console.log(audID+" says goodbye");
    };
}

无论出于何种原因，它都无法正常工作（帮助！http://jsfiddle.net/8176ccnk/）;如果确实如此，我想知道在这种情况下创建多个事件监听器是否必要，其中事件处理程序本身就像一个事件监听器。（我不认为有一个事件处理程序可以处理父DOM级别的所有子音频DOM事件......）一般来说，在这些事件中与DOM交互的最佳方式是什么？

Answer 1

media events中没有load个事件，因此您的处理程序audCheck未被调用。

您可以直接添加开始/结束/结束侦听器

var audList = document.getElementsByTagName("audio");
console.log(audList.length); //prints out how many audio elements there are
for (var i = 0; i < audList.length; i++) {
    audList[i].addEventListener("play", onPlay, false);
    audList[i].addEventListener("ended", onEnded, false);
}
function onPlay(e) {
    console.log(e.target.id + " says hello");
};
function onEnded(e) {
    console.log(e.target.id + " says goodbye");
};

演示：Fiddle

我是否需要多个音频元素的多个事件监听器-JavaScript？

1 个答案: