목차
DOMContentLoaded 예제 - 돔 웹문서 로드 완료 이벤트 DOMContentLoaded 정의 DOMContentLoaded 구문 DOMContentLoaded 예제 - 잘못된 사용 경우들
DOMContentLoaded 예제 - 돔 웹문서 로드 완료 이벤트
<html>
<head>
<script>
window.addEventListener('DOMContentLoaded', function(){
var hz = document.getElementById('hz').innerHTML;
document.getElementById("hz").innerHTML = "홈짱닷컴 Homzzang.com";
})
</script>
</head>
<body>
<p id="hz"></p>
</body>
</html>
결과보기
※ 파란색코드가 없으면 alert 코드가 작동 안 함. 예제보기
DOMContentLoaded 정의
DOM 구성요소 완전히 로드 될 때 실행.
1. cf.
DOMContentLoaded 이벤트 : 스타일시트, 이미지, 하위프레임 로딩 안 기다림 .
load 이벤트 : 스타일시트, 이미지, 하위프레임 로딩까지 전부 기다림.
2.
Lazyload (레이지로드: 스크롤 할 때마다 조금씩 콘텐츠 추가 로드) 구현할 때 유용.
INPUT요소에 텍스트 붙여넣기 후 붙여넣은 값을 JS변수에 담을 경우, <script defer > ...</script> 코드나 jQuery 의 $(document).ready(function() {...}); 코드로는 정상작동 안 되는 경우 존재 함. (경험함. ㅡㅡ;) 이럴 때 DOMContentLoaded 이벤트 사용하면 정상작동 함. (이것 때문에 몇 시간 헤멤. ㅡㅡ;;)
3. DOM 요소 로드 완료 후 JS 코드 실행
window.onload = function() {
// (외부 리소스 포함해서) 모든 요소 로드 후 실행될 코드
};
또는,
document.addEventListener("DOMContentLoaded ", function() {
// ( 외부 리소스 무관하게) DOM 요소 로드 후 실행될 코드
});
4.
IE9 이상 주요 최신브라우저 지원.
5. MDN DOMContentLoaded 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
DOMContentLoaded 구문
object .addEventListener(" DOMContentLoaded", homzzang );
※ homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)
※ addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)
※ addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.
DOMContentLoaded 예제 - 잘못된 사용 경우들
[주의] 아래처럼 사용하면 작동 X onDOMContentLoaded 전역이벤트속성 존재 X)
< element ondomcontentloaded =" homzzang() ">
또는,
object .ondomcontentloaded = function(){ homzzang() };
[예제1]
<html>
<head>
<script>
function homzzang(){
document.getElementById("hz").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
</head>
<body ondomcontentloaded="homzzang()" >
<p id="hz"></p>
</body>
</html>
결과보기
[예제2]
<html>
<head>
<script type="text/javascript">
document.ondomcontentloaded=function(){
document.getElementById("hz").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
</head>
<body>
<div id="hz"></div>
</body>
</html>
결과보기
최신댓글