window 객체

📖 window

• 웹 브라우저의 창을 나타내는 객체
• 자바스크립트의 객체, 함수, 변수는 모두 window 객체의 프로퍼티
• window 객체의 프로퍼티는 전역 변수, 메소드는 전역 함수가 된다.

window 이벤트 종류

load

브라우저나 스크립트의 로드가 완료되었을 때 발생

scroll

브라우저를 스크롤할 때 발생

window.addEventListener('scroll', function(){
    const scrollPoint = document.documentElement.scrollTop;

    console.log(scrollPoint);
})

스크롤 발생 시 마다 브라우저의 위치를 반환할 수 있다.

resize

브라우저 창의 크기 변화에 따라 발생

function handleWindowResize() {
    document.body.style.backgroundColor = 'pink';
    // body 접근   body,head,title등의 중요한 태그만 document로 접근 가능, 그 외 요소는 선택자로 접근해야함
}
window.addEventListener('resize', handleWindowResize);

기존 크기

브라우저 크기 변경

contextmenu

• 브라우저 우클릭 시 발생
• 우클릭 메뉴에는 페이지 소스 보기, 검사 등의 기능 포함
• 마우스 이벤트의 contextmenu와 동일하게 우클릭을 방지할 수 있다.
• 이벤트리스너에서 사용될 함수의 매개변수를 선언하면 자동으로 이벤트가 발생한 값을 함수에 받을 수 있다.
• 매개변수명.preventDefault()로 새로고침을 막을 수 있다.
• 매개변수는 e, event 처럼 작성자 마음대로 사용할 수 있다.

브라우저 전체 페이지 우클릭 방지

window.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

브라우저의 어느 곳을 우클릭해도 우클릭 메뉴를 볼 수 없다.

특정 요소 우클릭 방지

h1.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

특정 요소에 방지 기능을 추가하면 해당 요소를 제외한 그 외의 요소는 우클릭이 가능하다.

참고
window 객체
event 객체
preventDefault()