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

Question

我正在写一个愚蠢的页面，其中有 5 个名为 myAudio1 到 myAudio5 的音频元素，我想在每个音频都是 played/ended.

我目前的（当然不是最好的）方法是为我的每个音频标签制作一个 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 没有被调用。

您可以直接添加 start/stop/ended 个监听器

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？

Do I need multiple event listeners for multiple audio elements-JavaScript?

html

javascript

event-handling

dom-events

html5-audio