"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和IE10中找到成功.

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

浏览器支持DOMContentLoaded在Mozilla开发者网络上编目.截至今天,此活动仅在以下浏览器中可用: