3

我这样写了我的html页面：

<div>
    <img src="Natural1.jpg" id="img1" >
 <audio src="sound.mp3" id="audio1" ></audio>
</div>

我的javascript文件是这样的：

function init(){
    audio1 = document.getElementById("audio1");
    var img1 = document.getElementById("img1");
    img1.addEventListener("click", imgClick, false);
}
function imgClick(){
    if(audio1.paused){
        audio1.play();
    }
    else{
        audio1.pause();
    }
}
document.addEventListener('DomContentLoaded', init, false);

我在chrome12中运行，脚本先执行了document.addEventListener方法，但是没有进入init方法，为什么？我在 IE8 中尝试了attachEvent方法addEventListener，但它仍然没有。我的代码有什么问题？

4

2 回答 2

8

可能是事件名称的大小写。请尝试以下操作：

document.addEventListener('DOMContentLoaded', init, false);

很确定是这样的。我测试了以下内容：

document.addEventListener("DomContentLoaded", function(){ alert('Dom') }, false);
document.addEventListener("DOMContentLoaded", function(){ alert('DOM') }, false);

在 jsbin 上，后一个事件是单独提出的。请注意，IE8 不会引发此警报，因为此事件不会在那里发生。相反，您会从IE9 和 IE10中找到成功。

示例：http: //jsbin.com/ocidok/edit#javascript,html

浏览器支持DOMContentLoaded在Mozilla Developer Network上进行了分类。截至今天，此事件仅在以下浏览器中可用：

在此处输入图像描述

于 2012-05-04T03:05:21.283 回答
0

JavaScript 事件名称是区分大小写的字符串。因此，事件名称中的大写和小写字母不可互换。因此，将名称从 更改'DomContentLoaded'为'DOMContentLoaded'将解决问题 - 至少在 Chrome 中。

至于 IE 8：没办法。第一个实现DOMContentLoadedHTML5 事件的 IE 版本是 9 版，所以我只能说：更新你的浏览器！我还注意到您使用的是16-version-out-of-date Chrome 12，对吗？说真的，两个浏览器都需要更新。过时的浏览器会带来严重的安全风险。幸好我作为 Chromebook 用户能够保持计算机安全最关键的组件——浏览器——由于其无缝的特性而非常容易地保持最新......

于 2013-08-14T16:35:42.633 回答