jQuery에서 document 객체의 ready 이벤트
jQuery 를 처음 접하게 되면 예제에서 가장 먼저 마주하게 되는 메서드가 $(document).ready() 입니다. jQuery 를 사용하면 다음과 같은 형식으로 스크립트를 작성하게 됩니다.
1
2
3
4
5
<script> 
     $(document).ready(function(){                                                     
           //소스 작성 
     });
</script> 
cs


사실 이 ready() 메서드는 브라우저가 화면을 모두 render(그림) 한 이후 실행되는 이벤트 메서드 입니다.
$() 라는 jQuery 함수에 브라우저에서 DOM을 관리하는 기본 객체인 document 객체를 넘겨 줍니다.
1
$(document)                                                                                
cs


jQuery는 객체에 대한 이벤트를 다룰 수 있는데, 이 document객체가 DOM 구조를 모두 형성하고 나면 ready 이벤트를 발생하도록 구현했습니다.
1
$(document).ready()                                                                        
cs


그런데 이 ready() 메서드는 함수를 매개변수로 받게 되어있습니다. 이 함수는 이벤트가 발생하게 되면 실행될 콜백 함수 이벤트입니다. 이러한 콜백함수는 이벤트 핸들러 또는 이벤트 리스너라고도 불립니다. 자바스크립트에서는 함수 자체도 하나의 자료형으로서 매개변수로 넘길 수 있습니다.
1
2
3
4
5
6
7
    <script> 
     var callBack = function(){                                                     
           //소스 작성     
     };
     
     $(document).ready(callBack);
    </script> 
cs



보통은 위와 같은 구조처럼 따로 변수에 할당하지 않고 바로 익명 함수로 심플하게 넘겨 사용합니다.  ready() 이벤트 메서드는 여러번 사용해도 되며, 모두 브라우저가 HTML을 해석하고 DOM이 완성된 이후 차례대로 실행됩니다.
1
2
3
4
5
<script> 
     $(document).ready(function(){                                                 
           //소스 작성 
     });
</script> 
cs

 

 

jQuery는 더욱 심플하게 사용할 수 있도록 다음과 같은 형식도 지원합니다.   

1
2
3
4
5
<script>
     $(function(){
           //소스 작성                                                                
     });
</script>
cs

 

 



왜 ready() 이벤트를 사용해야 하는지?
브라우저는 HTML 소스를 해석할 때 위에서 아래로 해석하기 때문에 다음과 같이 jQuery로 DOM을 조작하려 하면 메서드 실행 시점에 input 태그가 그려지지 않아서 예상과 다른 결과를 맞이하게 됩니다. 따라서 이벤트를 걸어주어 화면이 모두 그려지고 난 다음 스크립트 로직이 실행되도록 하는 것입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery-3.3.1.min.js"></script>                                 
   
    <script> 
           $('#textInput').val('hello jQuery'); 
    </script> 
</head> 
<body> 
    <input id="textInput" type="text"> 
</body> 
</html> 
cs


자바스크립트의 경우에는 window 객체의 onload 이벤트에 바인드하는 방법을 사용하거나 </body> 바로 직전에 스크립트를 걸어 사용했습니다.
1
2
3
window.onload = function () {                                                        
    //소스 작성
}
cs

블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

,