20. ready, load 이벤트 리스너

본 포스팅은 간단하게 학습하고 넘어가겠습니다. 

 

DOM은 Document Object Model 의 약자입니다. 

자바스크립트가 HTML 에 대한 정보들(id, class, name, style)을 Object 자료형으로 정리해서 조작하는 것을 말합니다. 

 

ready 이벤트 리스너

 

~~~~~~~~~~~~
~~~~~~~~~~~~~~
~~~~~~

<script>
$('#text').html('조작해주지'); 
</script>

<p id='text'>나를 조작해보시지!</p>

~~~~~~~~~~~~~~~
~~~~~~~~~~~~~

결과는 어떻게 될까요? 

물론 변경이 안됩니다. 왜냐하면 p태그를 읽기 전이라 p태그에 대한 DOM이 생성되지 않았습니다. 

이 말은 즉, HTML은 위에서 부터 순차적으로 읽는데 위에서 이미 조작어를 만났는데 읽어들인 정보에는 #text에 대한 정보가 없습니다. 

 

이를 해결 하기 위해서는 ready 이벤트 리스너를 사용 할 수 있습니다. 

 

<script>
$(document).ready(function(){
	$('#text').html('조작해주지');
})
</script>

<p id='text'>나를 조작해보시지!</p>

ready 이벤트는 "웹문서에 있는 HTML을 모두 읽어 들인 이후에 실행하라" 라는 이벤트 리스너입니다. 

해당 이벤트 리스너를 사용하면 안정적으로 조작이 가능합니다. 

 

load 이벤트 리스너

이미지, CSS, JS파일이  전부 로드 되었는지 체크가 가능합니다. 

$('img').on('load', function(){
  //이미지 로딩 이후 실행 
});