jQuery - 윈도우 이벤트

브라우저에 변화가 발생하면 자동으로 실행될 이벤트를 설정할 수 있습니다.

이벤트	설 명
.ready()	페이지가 모두 로드되었을 때 (DOM 이 완전히 로드되었을 때 실행)
.load()	페이지가 모두 로드되었을 때 (DOM, 이미지, 텍스트 등 모든 요소가 로딩되면 실행)
.unload()	페이지를 빠져 나갈 때
.resize()	브라우저 창 크기를 조정할 때
.error()	문서나 이미지를 로드하는 중에 오류가 발생하면
.scroll()	사용자가 스크롤 할 때 발생

.load() 이벤트

load() 이벤트는 브라우저가 문서를 모두 읽어 들였을 때 이벤트가 발생합니다. .ready() 는 HTML 태그(DOM)가 로딩이 완료되었을 때 실행하지만 .load() 는 이미지를 포함한 모든 요소, 텍스트들이 로딩이 끝나면 실행됩니다. 

<script>
$(window).load(function(){
  alert("브라우저가 페이지를 로드하였습니다.");
});
</script>

.resize() 이벤트

resize 이벤트는 브라우저 창 크기가 바뀔 때 이벤트가 발생합니다.

<script>
$(function(){
 $(window).resize(function(){
   alert("창 크기가 바뀌었습니다.");
 });
});
</script>

.error() 이벤트

error 이벤트는 로드하려는 문서나 파일에서 오류가 발생할 때 이벤트를 처리합니다. 예제는 해당 이미지를 읽어 들이지 못할 때 "no_img.png"로 대체합니다.

<script>
$(function(){
 var img = $("img");

 img.error(function(){
   $(this).attr("src", "no_img.png");
 });
});
</script>

<img src="habony.jpg" id="img">

.scroll() 이벤트

사용자가 스크롤 할 때마다 이벤트가 발생합니다. 대상은 요소일 수 있고, 윈도우거나 문서가 될 수 있습니다.

다음은 사용자가 스크롤하면 .scrollTop() 이벤트가 발생하며, 이 속성 값을 하단에 출력하게 됩니다.

<style>
  .on {
    width: 100px;
    height: 100px;
    border: 1px solid;
 overflow:scroll;
  }
</style>

<script>
$(function(){
 var bar = $(".mv");

 bar.scroll(function(){
   $("span").text($(this).scrollTop());
 });
});
</script>

<div class="mv on">
하보니 PHP하보니 PHP하보니 PHP하보니 PHP하보니 PHP하보니 PHP하보니 PHP
</div>
Top: <span>0</span>px