웹페이지를 불러올때 처리 순서를 먼저 알아보자
1. 웹문서읽기 ㅡ> 2. DOM생성 ㅡ> 3. 페이징 로딩완료
$(document).on() / $(document).ready() 가 2번의 DOM생성시 실행되며
window.onload 는 3번의 페이징 로딩완료 후 실행된다.
//1
$(document).ready(function(){
console.log("document.ready");
});
//2
$(window).ready(function()
{
console.log("window.ready");
});
//3
window.onload = function()
{
console.log("window.onload");
};위 같이 실행했을 때 순서는 1->2->3 이였어야햇다. 그리고 보통 저렇게 나올것이다. 그런데....
좀 의외의 결과가 나왔다. 3->1->2 순으로 실행된 것...
그래서 document.ready 를 jquery가 아닌 javascript 코드로 다시 테스트해봤다
//1
$(document).ready(function(){
console.log("document.ready");
});
//2
$(window).ready(function(){
console.log("window.ready");
});
//3
window.onload = function(){
console.log("window.onload");
};
//4
document.addEventListener("DOMContentLoaded",function(){
console.log("javascript document.ready");
});결과는...
4->3->1->2 순으로 나왔다.
뇌피셜로 끄적이자면
원래 DOM생성시 실행되는 document.on/ready 가
페이징로드가 완료되고 실행되는 window.onload 보다 먼저 실행되는게 맞는것 같다.
하지만 이건 순수 javascript의 코드일 경우만 해당되고 아마 jquery라는 프레임워크를 불러오는데 있어서 시간 차이가 생기는것이라 생각한다.
결과값이 다르게나오는 이유를 찾았다.
최초실행과 새로고침의 차이였다. 최초실행시 생각했던 대로 3번 window.onload 가 가장 마지막에 실행되었다.
아마 웹브라우저를 불러와있는 상태냐 아니냐 차이인것 같다.
결론 : document. on/ready가 window.onload보다 먼저 실행되니 코드 짤 때 유의하자
수정) window.ready 와 document.ready 는 같은 방식으로 작동되며 동일하다고 판단된다. 보통 document.ready 를 사용한다.
추가로 기본적으로window가 document 보다 상위객체이다.
추가로
■ $(document).on( "type" , "id" , function(){})
이 경우는 "이벤트를 위임"을 보여준다고 생각하면 된다.
이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행한다.
그래서 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다.
즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 <html> 태그 부터 아래로 나뭇가지처럼 자식태그들이 형성이 되어 있고, 자식 태그 들이 없는 태그들(나뭇잎)까지 쭉쭉 뻗어 있는 듯한 모양)보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.
■ $(document).ready(function(){})
이 경우는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 한다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다.
쉽게 말하면 이 경우에서 click 함수를 전파할 때 알고있는 DOM의 엘리먼트 들에는 새롭게 생성된 태그들은 존재하지 않다고 알고 있기 때문이다.
DOM을 모르겠다면 -> 위키 백과: DOM이란?
$(window).ready(function(){}) 는 똑같은 동작방식의 같은 역할을 한다.
window.onload = function(){}
document.ready 와 실행되는 시간 차이가 있을 뿐 같은 역할이라 생각하면 될 듯 하다.
어렵다...
'자바스크립트(jquery)' 카테고리의 다른 글
| javascript var? let? const? (0) | 2024.03.21 |
|---|---|
| javascript로 만든 jquery empty (0) | 2024.03.21 |
| javascript 동적 변수명 선언 (0) | 2024.03.21 |
| javascript sleep 함수 (0) | 2024.03.21 |
| Jquery 엑셀다운로드 (0) | 2024.03.21 |