“DomContentLoaded”在我的浏览器中不起作用？

Question

我写了这样的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，但它仍然没有。  我的代码出了什么问题？

Answer 1

可能是事件名称的大写。请尝试以下方法：

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

很确定是这种情况。我测试了以下内容：

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

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

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

DOMContentLoaded的{​​{1}}的浏览器支持已编入目录。截至今天，此事件仅在以下浏览器中可用：

Answer 2

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

至于IE 8：没有办法。在其他HTML5事件中实现DOMContentLoaded的IE的第一个版本是版本9，所以我只能说：更新浏览器！我还注意到你使用的是 16版本的过期 Chrome 12，我是对的吗？说真的，两个浏览器都需要更新。过时的浏览器会带来严重的安全风险。作为Chromebook用户，我能够将最重要的组件保存到计算机安全 - 浏览器 - 由于其无缝的性质而非常容易，这是件好事......