在javascript中将事件侦听器添加到音频HTML5标签答案

【问题标题】：Adding event listener to audio HTML5 tag in javascript在javascript中将事件侦听器添加到音频HTML5标签
【发布时间】：2011-09-12 20:27:29
【问题描述】：

您好，我正在 Javascript 中创建一个新的音频标签元素，代码如下：

var audio = document.createElement("audio");
audio.setAttribute("id","myid");
audio.setAttribute("autoplay","autoplay");
document.body.appendChild(audio);

在将它附加到正文之前，我想放置一个 onended 事件处理程序，我尝试过这样的事情：

audio.onended = foo;

其中 foo 类似于：function foo(){alert('Hola')}

和

audio.setAttribute("onended","foo()");

在这两种情况下它都不起作用。在第一种情况下，音频标签被附加，没有任何 onended 事件处理程序；而在第二种情况下，附加了音频标签，onended 事件在属性上，但它不会触发。

有人知道吗？

提前致谢。

-z-

【问题讨论】：

标签： javascript html audio event-handling

【解决方案1】：

尝试：

audio.addEventListener('ended', foo);

这是添加事件监听器的正确标准方法。

【讨论】：

在我偶然发现这个答案之前，我尝试了 $(audio).bind('onended')。毫不奇怪，它没有用。你的有，$(audio).bind('end') 也有。无法决定我更喜欢哪个...在依赖于 jquery 的代码中。
在依赖 jQuery 的代码中，所有绑定都是通过 jQuery 完成的，因此在涉及音频元素时没有理由例外。
有效。但我很确定说“这是添加事件侦听器的正确和标准方法”是不准确的。直接分配事件监听器仍然是几乎所有其他标签支持的机制。它不适用于此特定事件的音频标签有点反常。
直接分配事件（传统模型）适用于大多数事件，但肯定不适用于所有事件，当然也不适用于自定义事件。此外，您只能分配一个事件处理程序，而不能追加和删除多个侦听器。标准（w3c）方式是使用addEventListener。在此处阅读更多信息quirksmode.org/js/events_advanced.html

【解决方案2】：

首先，在使用之前确认audio元素是否有事件，假设HTMLAudioElement是音频，你可以这样测试audio.hasOwnProperty('onended')

基于我的浏览器，不支持。

【讨论】：