JS jQuery (part. 30) - 윈도우 이벤트

윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라 window 객체와 document 객체 이외의 img 태그 등이 사용할 수 있는 이벤트이다

 

윈도우 이벤트 종류

• ready : 문서 객체가 준비 완료되면 발생
• load : 문서 객체를 불러들일 때 사용
• unload : 문서 객체를 닫을 때 발생
• resize : 문서 객체의 크기를 변화 시킬 때 발생
• scroll : 문서 객체를 스크롤할 때 발생
• error : 에러가 있을 때 발생

---

페이스북의 무한 스크롤 구현

스크롤이 문서 끝까지 내려가면 자동으로 문서가 연장된다

 

$(function () {
  $(window).scroll(function () {
  
  });
});

 

window 객체에 scroll 이벤트를 연결한다 window 객체는 별도의 선택자가 없으므로, 곧바로 문서 객체를 넣는다

사용자가 마우스 스크롤을 움직이면 무조건 scroll 이벤트가 발생한다

document 객체의 height 속성은 문서 전체의 높이를 의미

스크롤을 끝까지 내리면 window 객체의 scrollTop 속성과 height 속성을 합한 값이 document 객체의 높이와 같아진다

document.height = window.scrollTop + window.height

 

$(function () {
  for (var i = 0; i < 20; i++) {
	  $('<h1>default Text</h1>').appendTo('body')
  }
})

$(function () {
  $(window).scroll(function () {
    var scrollHeight = $(window).scrollTop() + $(window).height();
    var documentHeight = $(document).height();
    
    if (Math.round(scrollHeight) == documentHeight) {
      for (var i = 0; i < 10; i++) {
    	  $('<h1>Infinity Scroll Text</h1>').appendTo('body');
      }
    }
  });
});

 

scrollHeight가 소수점까지 나와서 Math.round( )로 반올림해준다