[반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

 

---

addEventListener( ) 

 

지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적으로 Element, Documnet, Window 지만 이벤트를 지원하는 모든 객체를 대상으로 할 수 있다. 

 

 

 

 

target.addEventListener(type, listener);

 

type: 반응할 이벤트 유형을 나타낸다. (대소문자 구분)

listener: 여기에는 함수가 들어간다 안에 함수를 바로 작성해주어도 되고 함수 이름을 넣어주고 함수는 따로 작성해주어도 된다

 window.addEventListener('click', function () {
  		new Character();
   });

.

   function clickHandler(e) {

      new Character();
    }

   window.addEventListener('click', clickHandler);

 

자주 사용하는 이벤트 유형

• click : 클릭 시 반응한다. 
• scroll : 스크롤을 올리거나 내릴때 반응한다.
• mousemove : 마우스 커서를 움직일 때 반응한다. 
• keydown: 키보드의 키를 누를때 반응한다. 
• keyup: 키보드의 키를 뗄때 반응한다. 
• resize: 화면크기가 변화할 때 반응한다.

 

 

 

 

 

 

 

 

---

 

 

 

 

스크롤 양에 따른 수치로 스크롤 진행 바 만들기

사용자가 스크롤한 양만큼 늘어나는 스크롤 진행 바 만들기는 반응형 웹의 가장 기초적이라고 할 수 있다. 

document, window 내장 함수들을 이용하여 쉽게 만들 수 있다. 

 

• HTMLElement.offsetHeight : 해당 엘리먼트만의 높이를 반환한다. 수직 패딩과 보더, 문자열까지만 포함한다. 
• window.innerHeight : 윈도우 인터페이스가 윈도우 내부 화면의 높이를 픽셀 단위로 반환한다. 창의 레이아웃 뷰포트 높이에서 가져온다. 수평스크롤바가 있다면 그것까지 포함한다. 
• window.innerWidth: 윈도우 인터페이스가 윈도우 내부 화면의 너비를 픽셀 단위로 반환한다. 창의 레이아웃 뷰포트 너비에서 가져온다. 수직스크롤바가 있다면 그것까지 포함한다.
• pageYOffset : 세로축으로 스크롤된 픽셀수를 반환한다. (스크롤한 양)

 

const progressElem = document.querySelector('.progress-bar');

function scrollHandler() {
let maxScroll = document.body.offsetHeight - window.innerHeight;
let scrollPer = pageYOffset / maxScroll;

progressElem.style.width = scrollPer * 100 + '%';
}

 window.addEventListener('scroll', scrollHandler);

 

스크롤바를 내려서 끝까지 스크롤 할 때 결국 스크롤바 하나의 크기만큼은 안 하기 때문에 바디의 전체길이에서 현재 창의 높이를 빼주어야 한다. 

지금 현재의 스크롤한 양을 스크롤이 가능한 전체로 나누어 주고 100을 곱해주면 얼마나 스크롤했는지를 퍼센트로 값을 구할 수 있다. 

이 퍼센트로 div의 width를 바꾼다거나 위치를 변경한다거나 하는 다양한 css에 활용할 수 있다.