TIL 200313

1. 오늘

• document.on과 document.ready의 차이에 대해 알아보았다.

document.ready()

• 보통 위와 같은 형식으로 쓰인다. 위는 DOM이 준비가 됐을때 클릭이벤트를 실행하겠다는 뜻으로 간주할 수 있다.
• 이것과 비슷하게 $(window).load가 있다. 이는 window에서 모든게 load 된 시점을 뜻한다.
• 페이지 시작 시에 어떠한 이벤트를 발생시키려 하거나 버튼 클릭 등의 이벤트를 구현하려 할때 $(document).ready() function 안에 있는것들을 불러오게 된다.
• 실행 시점은 DOM이 로드 된 후 즉시 실행하게 된다.
• 문제는 동적으로 생성되는 엘리먼트들에 한해서는 해당위에 적혀있는 내용부분이 반영되지 않는다.
• 동적이란 보통 ajax를 통해 만들어 지는 것들을 의미한다. 기본으로 DOM이 생성된 후, js를 통해 만들어 지는것들을 의미한다.
• 대강 순서는 이러하다.

1. DOM이 로드된다.
2. DOM이 준비된 상태에서 클릭 이벤트가 진행된다.
3. ajax등을 통해 동적으로 DOM에 요소(=태그, 엘리먼트)가 추가된다.
4. 동적으로 생성된 요소에는 클릭 이벤트가 적용되지 않는다.

document.on()

• 동적요소가 생성될 경우엔 위와같이 document.on을 사용하는 방법이 있다.

둘의 큰 차이는

• document.ready는 해당 셀렉터에 직접 이벤트를 바인딩한다. 지금 존재하는 태그들만 영향을 받기에 새로 생긴(동적으로)요소에는 영향을 줄 수 없다.
• document.on은 이벤트를 위임한다. 이 이벤트 핸들러는 DOM트리 보다 위에 바인딩이 되어 셀렉터와 일치하는 태그를 찾아 실행한다. 대부분의 DOM이벤트들이 위에서 아래로, 트리 꼭대기부터 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 가능한 것이다.
• 즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 태그 부터 아래로 나뭇가지처럼 자식태그들이 형성이 되어 있고, 자식 태그 들이 없는 태그들(나뭇잎)까지 쭉쭉 뻗어 있는 듯한 모양)보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.

em, rem 의 차이

• css 작업을 하다 em과 rem의 차이를 찾아보았다.
• css의 길이단위 중 em과 rem은 상대적으로 크기를 결정한다.

em

• em단위는 상위요소크기의 몇배인지를 정한다.
  
• 이는 글자크기를 상위 요소의 1.5배로 하겠다는 것이다.

rem

• rem단위는 문서의 최상위 요소, 즉 html요소의 크기의 몇배인지로 결정한다.

2. 참고한 사이트

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이
$(docment).on Vs $(document).ready
$(document).ready() 와 웹페이지의 실행순서에 대해 알아보자
[JavaScript] $(document).on과 $(document).ready의 차이(부제: click함수 안될 때)