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 |
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법 (0) | 2018.06.22 |
|---|---|
| [jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법 (0) | 2018.06.22 |
| [jQuery] jQuery $ 식별자 중복으로 충돌 방지하기 (0) | 2018.06.11 |
| [자바스크립트] 데이터 속성(data-xxx)에 대해 (1) | 2018.06.09 |
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편 (0) | 2018.06.08 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그