power-girl0-0

[ 이벤트 타입 ] 문서 로딩 본문

언어/Javascript

[ 이벤트 타입 ] 문서 로딩

power-girl0-0 2021. 2. 10. 20:13
728x90

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다.

이것을 알려주는 이벤트가 load, DOMContentLoaded이다.

아래 코드의 실행결과는 null이다.

<p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문이다.

<html>
    <head>
        <script>
        var t = document.getElementById('target');
        console.log(t);
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

이를 해결하려면 아래와 같이, 스크립트를 문서 끝에 위치시켜야 한다.

<p id="target">Hello</p>
<script>
    var t = document.getElementById('target');
    console.log(t);
</script>

또 다른 방법은 load 이벤트를 이용하는 것이다.

<head>
    <script>
        window.addEventListener('load', function(){
            var t = document.getElementById('target');
            console.log(t);
        })
    </script>
</head>
<body>
    <p id="target">Hello</p>
</body>

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다.

이것을 애플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.

 

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.

<html>
    <head>
        <script>
            window.addEventListener('load', function(){
                console.log('load');
            })
            window.addEventListener('DOMContentLoaded', function(){
                console.log('DOMContentLoaded');
            })
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.

실제로 요즘에는 라이브러리가 다 처리해주므로, 우리는 이벤트 타입을 잘 보지 못한다.

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

jQuery 이벤트  (0) 2021.02.10
[ 이벤트 타입 ] 마우스  (0) 2021.02.10
[ 이벤트 타입 ] 폼 (form)  (0) 2021.02.10
기본동작의 취소  (0) 2021.02.10
이벤트 전파(버블링과 캡처링)  (0) 2021.02.10
'언어/Javascript' Related Articles more
Comments