![[1] $(document).ready 란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcso4Ao%2Fbtq8Oq5qcJ8%2FxgqcvO1kStfbBJfbAEoQ70%2Fimg.png)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> TEST </title>
<script src="../../../js/jquery.min.js"></script>
<script>
$("#clickButton").click(function(){
alert("Hello");
});
</script>
</head>
<body>
<input type="button" id="clickButton" value="클릭"/>
</body>
</html>$("#clickButton") : 태그id가 clickButton
click(function(){}) : click 이벤트를 주었을 때
alert("Hello"); : Hello 라는 경고창을 화면에 뿌려준다
여기서 주의할 점은 script 소스와 input button 소스의 위치입니다.
script 소스가 위에 있고 input button 소스가 위에 있습니다.
html 소스 흐름은 위에서 아래로 순차적으로 진행이 됩니다.
"클릭" 버튼을 눌러봐도 alert 이벤트가 발생하지 않습니다.
그 이유는 clickButton 태그id에 대한 클릭이벤트를 정의한 script 소스가 상단에 있고 input button 소스가 그 다음에 위치하게 되어 해당 태그id가 없는상태로 인식한 것입니다.
(script 소스 다음 input button 소스)
이번엔 위치를 변경해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> TEST </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button type="button" id="clickButton"> 클릭 </button>
<script type="text/javascript">
$("#clickButton").click(function(){
alert("Hello");
});
</script>
</body>
</html>
script 소스를 아래에 위치시키니 경고창이 떴습니다.
이번엔 $(document).ready(function(){}) 을 사용하여 첫번째 소스와 동일한 위치에 배치시켜 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> TEST </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#clickButton").click(function(){
alert("Hello");
});
})
</script>
</head>
<body>
<button type="button" id="clickButton"> 클릭 </button>
</body>
</html>
이번엔 script 소스가 상단에 위치해 있는데도 경고창이 잘 뜹니다.
왜인지는 다음 코드 하나로 설명합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> TEST </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("hello1");
})
console.log("hello2");
</script>
</head>
<body>
<script>
console.log("hello3");
</script>
</body>
</html>
$(document).ready(function(){}) 내부에 있는 hello1이 가장 나중에 나왔습니다.
즉 body 태그의 모든 태그들이 진행된 다음에 호출이 되는 코드입니다.
$(document).ready(function(){}) 는 $(function(){}) 으로 간결하게 사용할 수 있습니다.
이는 javascript의 windows.onload와 같은 기능을 하며 호출순위는 $(document).ready(function(){}) 이 먼저고 그 다음이 window.onload 입니다.
즉, 둘이 동일하게 body 태그내의 모든 코드를 읽은 후 호출되는 기능이라고 해도 window.onload 코드가 가장 나중에 호출이 된다는 것 입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> TEST </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.onload = function(){
console.log("hello_onload");
}
</script>
<script type="text/javascript">
$(document).ready(function(){
console.log("hello_jquery");
})
</script>
</head>
<body>
</body>
</html>
onload 코드가 나중에 출력되는 것을 확인할 수 있습니다.