• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - DOMContentLoaded 이벤트 ★ - 돔 웹문서 로드 완료 이벤트 (= 돔콘텐트로디드 이벤트)

742  

목차

  1. DOMContentLoaded 예제 - 돔 웹문서 로드 완료 이벤트
  2. DOMContentLoaded 정의
  3. DOMContentLoaded 구문
  4. 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.

DOMContentLoaded 이벤트 : 스타일시트, 이미지, 하위프레임 로딩 안 기다림.

load 이벤트 : 스타일시트, 이미지, 하위프레임 로딩까지 전부 기다림.

 

2.

Lazyload (레이지로드: 스크롤 할 때마다 조금씩 콘텐츠 추가 로드) 구현할 때 유용.

 

3.

IE9 이상 주요 최신브라우저 지원.

 

 

DOMContentLoaded 구문

 

object.addEventListener("DOMContentLoaded", homzzang);

 

※ homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)

※ addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)

※ addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.  


DOMContentLoaded 예제 - 잘못된 사용 경우들

[주의] 아래처럼 사용하면 작동 X
(∵ ondomcontentloaded / 
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>

 

결과보기



찾아주셔서 감사합니다. Since 2012