"DomContentLoaded"가 내 브라우저에서 작동하지 않습니까?

Question

내가 이렇게 내 HTML 페이지를 썼다 :

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

을 그리고 내 자바 스크립트 파일은 이것이다 :

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 메서드를 시도했지만 여전히 그렇지 않습니다. 내 코드에 어떤 문제가 있습니까?

Answer 1

이벤트 이름의 대소 문자가 될 수 있습니다. 대신 다음을 시도하십시오.

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

정말 확실합니다. 나는 다음을 테스트했다 :

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

On jsbin, 그리고 후자의 이벤트가 단독으로 발생했다. IE8은이 이벤트가 발생하지 않기 때문에이 경고를 발생시키지 않습니다. 대신 IE9 and IE10에서 성공할 수 있습니다.

예 : DOMContentLoaded에 대한 http://jsbin.com/ocidok/edit#javascript,html

브라우저 지원은 Mozilla Developer Network에서 카탈로그됩니다. 오늘,이 이벤트는 다음 브라우저에서만 사용할 수 있습니다 :

Answer 2

자바 스크립트 이벤트 이름은 대소 문자를 구분 문자열입니다. 따라서 대/소문자는 이 아니며은 이벤트 이름으로 바꿔 사용할 수 있습니다. 따라서 'DomContentLoaded'에서 'DOMContentLoaded'으로 이름을 변경하면 Chrome에서 문제가 해결됩니다.

IE 8의 경우 : 방법이 없습니다. 다른 HTML5 이벤트 중 DOMContentLoaded을 구현 한 IE의 첫 번째 버전은 버전 9 였으므로 내가 말할 수있는 것은 다음과 같습니다. 브라우저 업데이트! 또한 의 최신 버전 인의 12 버전을 사용하고 있음을 확인했습니다. 맞습니까? 진심으로 두 브라우저을 업데이트해야합니다. 구식 브라우저 심각한 보안 위험이 있습니다. Chromebook 사용자로서 컴퓨터 보안에 가장 중요한 구성 요소 인 브라우저를 유지할 수 있다는 점이 좋은 점입니다. 브라우저의 최신 기능은 매우 자연스러운 덕분입니다.