window.onload() : image, style, script가 모~두 로드 되었을 때 trigger된다.

DOMContentLoaded : HTML(DOM)이 로드되었을때 발생하고, image나 css등을 기다리지 않는다.







순서


(초기값은 readyState = loading)

  1. 가장 먼저 window 객체가 생성. (window는 전역 객체로 웹 페이지와 탭마다 생성)

  1. documet객체가 window의 프로퍼티로 생성되며 DOM트리의 구축을 한다. document객체는 readyState 프로퍼티를 가진다.

       3. DOM트리를 구축 중 script요소를 만나면 해당 script의 구문 분석 후 오류 발생하지 않으면 바로 그 자리에서 실행한다. 
         실행시 동기적으로 실행되어 html문서의 DOM트리 구축은 블로킹 된다. 오류가 발생한다면 멈추며, HTML DOM트리 구축을 중단한다. 

       4. script까지 모두 읽고 DOM구축이 성공한다면 readyState = interactive를 가진다.

       5. 이때 웹 브라우저는 DOM트리 구축을 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.

       6. img등 이미지 파일등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽는다

       7. 리소스까지 모두 읽어 들인 후에는 readyState = complete 으로 바뀌고 브라우저는 Window객체를 상대로 load이벤트(onload)를 발생시킨다.

모던 자바스크립트 ( 487page )






저작자표시 비영리 변경금지 (새창열림)

'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 스크롤 거리 구하기  (2) 2019.12.01
[JAVASCRIPT] event processing  (0) 2019.12.01



  • IE, firefox
document.documentElement.scrollLeft : x 축 방향으로 스크롤한 거리
document.documentElement.scrollTop : y 축 방향으로 스크롤한 거리
  크롬, 사파리, 오페라에도 같은 프로퍼티가 있지만 값이 항상 0

  • Chrome, safari, opera, edge, Quirks Mode
document.body.scrollLeft : x 축 방향으로 스크롤한 거리
document.body.scrollTop : y 축 방향으로 스크롤한 거리

  • Firefox, chrome, safari, opera, edge, IE>=9
window.pageXOffset : x 축 방향으로 스크롤한 거리
window.pageYOffset : y 축 방향으로 스크롤한 거리


  • 크로스브라우징 대응








function getScrollTop()
{
    if(window.pageYOffset !== undefined)
    {
        return window.pageYOffset;
    } else {
        return document.documentElement.scrollTop || document.body.scrollTop;
    }
}

function getScrollLeft()
{
    if(window.pageXOffset !== undefined)
    {
        return window.pageXOffset;
    } else {
        return document.documentElement.scrollLeft || document.body.scrollLeft;
    }
}

저작자표시 비영리 변경금지 (새창열림)

'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 브라우저 로드 순서  (0) 2019.12.01
[JAVASCRIPT] event processing  (0) 2019.12.01


  • event 등록 방법

  1. HTML 요소의 속성으로 등록하는 방법
            onclick, ondblclick, 등의 html 속성에 javascript 함수를 정의하여 작동시키는 방법.
            <input type="button" onclick="이런식();">

  1. DOM 요소의 프로퍼티로 등록하는 방법
            DOM의 객체인 window의 onload를 사용하여 등록하는 방법.
            
            ex) 
                        





  • addEventListener 메서드를 사용하는 방법
            
  • 등록
        
        target.addEventListener(type, listener, useCapture);
        
        target : 보통은 등록할 DOM 노드, Element, Document, Window, XmlHttpReqeust와 같이 이벤트를 지원하는 모든 객체
        type : 이벤트 유형 문자열 ( "click", "mouseup"..... )  https://developer.mozilla.org/ko/docs/Web/Events
        listener : 처리 담당 함수
        useCapture : 이벤트 단계 ( default : false )

  • 삭제
            target.removeEventListener(type, listener, useCapture);


문제점
1의 경우, HTML/JS가 섞여 가독성이 떨어짐. 특정 요소의 특정 이벤트(input button의 onclick에 단 하나의 이벤트)만 등록할 수 있는 단점이 있고, 그 요소에 똑같은 이벤트를 등록하면 override됨. 
2의 경우, HTML/JS를 분리 할 수 있다. 그러나 1과 같이 특정 요소의 특정 이벤트에 대해서 이벤트 처리기를 단 하나만 등록할 수 있는 단점이 있다.
1.2의 경우 공통적인 단점이 여러 개발자가 작성할 경우 이전 이벤트가 override 되는 단점을 갖고 있다.



  • 이벤트 전파
HTML에서는 부모 요소의 보더 박스 안에 자식 요소를 배치하며, 자식 요소는 부모 요소 안에 겹쳐진 상태로 표시된다. 이런 상태에서 자식 요소를 클릭하면 컴퓨터는 클릭한 요소가 부모/자식인지 알 수가 없다. 그래서 요소에서 이벤트가 발생하면 해당 요소의 조상요소를 포함한 전체에 이벤트 처리기나 이벤트가 리스너가 등록되어 있는지 확인하는 작업을 거쳐 등록된 함수가 있을 때 그 함수를 실행하도록 설계되어 있다.

  • 이벤트 객체

  • 이벤트의 단계
        
  1. 캡쳐링 단계(useCatpure : true)

[ 캡쳐링 - 최상위에서 타겟 요소까지 전파 ]

            이벤트가 최상위 window 객체에서 DOM트리를 타고 이벤트 타겟(발생한 요소)까지 전파됨. 이 단계에서 이벤트 타겟에 등록한 리스너보다
            타고 내려가는 중간 과정에 어떠한 이벤트 리스너등이 있으면 그것이 먼저 실행됨. 즉 이벤트 타겟이 이벤트를 수신하기 전에 이벤트를 
            중간에 가로채기(캡쳐)한다고 하여 캡쳐링 단계라고 한다. useCatpure의 기본값은 false이며 버블링단계에서만 리스닝 한다. true일 경우 캡쳐링단계.

  1. 타겟 단계
            이벤트가 이벤트 타겟에 도착(전파)된 단계. 이벤트 타겟에 등록된 이벤트는 이 시점에 실행됨.

  1. 버블링 단계(useCapture : false)

[ 버블링 - 하위 엘리멘트에서 상위 엘리먼트로 전파 ]


            이벤트가 이벤트 타겟에서 출발하여 DOM 트리를 타고 window객체까지 거슬러 올라가 전파되는 단계. 이 단계에 반응하도록 등록된 이벤
            트 리스너는 타겟에 등록된 이벤트 이후에 실행됨. 단 focus / blur이벤트는 그 요소만 필요한 이벤트이므로 버블링이 발생되지 않음.
            이벤트 리스너의 useCapture가 true면 타겟과 캡쳐링 단계에서만 실행되고 false이면 타겟 단계와 버블링 단계에서만 실행된다.
            이벤트 처리기와 리스너 모두 같은 요소에 등록되어 있다면 이벤트 처리기 먼저 실행되고 리스너에 등록된 순서에 따라 순차적 실행된다.

  1. 제공 메서드
            stopPropagation : 그 다음 요소로 이벤트가 전파되는 것을 막는다. 버블링 또한 되지 않음. 같은 단계의 리스너는 수행됨. 상위로 전파안됨
            stopImmediatePropagation : 상위로의 전파뿐만 아니라 같은 단계로도 전파되지 않고 일시적으로 멈춤.
            preventDefault : 웹 브라우저에 구현된 기본 동작을 취소. 해당 이벤트 객체의 cancelable 프로퍼티가 true일 경우만 사용가능.

  • 주요 이벤트 처리기





  • 이벤트 위임

개념 : 하위 요소에 각각 이벤트를 직접 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식.




















저작자표시 비영리 변경금지 (새창열림)

'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 브라우저 로드 순서  (0) 2019.12.01
[JAVASCRIPT] 스크롤 거리 구하기  (2) 2019.12.01

+ Recent posts

티스토리툴바