javascript - "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 的支持列在 Mozilla Developer Network 上.从今天起，此事件仅在以下浏览器中可用: