$(document).ready / $(document).on

$(document).ready

- DOM이 준비가 됐을 때 이벤트를 시작하겠다는 뜻이다.

- 이벤트 핸들러를 엘리먼트에 직접 바인딩한다. 그렇기에 당장 존재하는 태그들에만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다.

 

※ 이벤트 핸들러(event handler)

웹 페이지에서는 수많은 이벤트가 계속해서 발생하고 
특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다.


ex)

 

 

 

$(document).on

- 이벤트를 위임하는 것으로 새로 생긴 요소에도 기존 부모가 이 이벤트를 가지고 있다면 그걸 그대로 넘겨받을 수 있다.

- 우리가 알고있는 DOM트리보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 캐그가 동적으로 생성되더라도 그 이벤트를 인식 할 수 있다.