자바스크립트 이벤트 리스너 심화: window 객체 활용하기

안녕하세요! 오늘은 자바스크립트 이벤트 리스너(Event Listener) 두 번째 파트로, window 객체를 활용한 이벤트 감지 방법을 배운 내용을 정리해보겠습니다. 특히, 창 크기 변경, 복사 감지, 인터넷 연결 상태 감지 등의 이벤트를 처리하는 방법을 살펴보겠습니다.

---

1. window 객체와 이벤트 리스너

window 객체는 브라우저 창 전체를 의미하는 객체로, 다양한 이벤트를 감지할 수 있습니다. 예를 들어, 창 크기 변경(resize), 복사(copy), 오프라인 상태(offline) 감지 등이 가능합니다.

📌 기본 문법

window.addEventListener("이벤트명", 이벤트핸들러);

window 객체를 사용하면 문서(body)뿐만 아니라 브라우저 전체에서 발생하는 이벤트를 감지할 수 있습니다.

---

2. 창 크기 변경 감지 (resize 이벤트)

사용자가 브라우저 창 크기를 변경하면 배경색이 tomato로 바뀌는 기능을 만들어보겠습니다.

🔹 JavaScript 코드

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
    console.log(document);
}

window.addEventListener("resize", handleWindowResize);

📝 코드 설명

1. handleWindowResize 함수는 document.body.style.backgroundColor를 tomato로 변경합니다.
2. window.addEventListener("resize", handleWindowResize);를 사용하여 창 크기가 변경될 때 이벤트를 감지합니다.

실행 결과

• 브라우저 창 크기를 조절하면 배경색이 토마토색으로 변경됩니다.

---

3. 복사 감지 (copy 이벤트)

사용자가 페이지에서 텍스트를 복사하면 경고(alert)를 띄우는 기능을 구현할 수 있습니다.

🔹 JavaScript 코드

function handleWindowCopy() {
    alert("copier");
}

window.addEventListener("copy", handleWindowCopy);

실행 결과

• 사용자가 텍스트를 복사하면 ‘copier’라는 알림이 나타납니다.

---

4. 인터넷 연결 상태 감지 (offline 이벤트)

인터넷 연결이 끊어졌을 때 사용자에게 경고 메시지를 띄울 수 있습니다.

🔹 JavaScript 코드

function handleWindowOffline() {
    alert("SOS no WIFI");
}

window.addEventListener("offline", handleWindowOffline);

실행 결과

• 와이파이 또는 인터넷 연결이 끊어지면 ‘SOS no WIFI’ 알림이 표시됩니다.

---

5. 전체 코드 정리

아래는 오늘 배운 내용을 한데 모은 전체 코드입니다.

const title = document.querySelector("div.hello:first-child h1");

console.log(title);

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
    console.log(document);
}

function handleWindowCopy() {
    alert("copier");
}

function handleWindowOffline() {
    alert("SOS no WIFI");
}

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);

---

오늘 배운 내용을 정리하면:

✅ window.addEventListener("resize", handler)를 사용하면 창 크기 변경을 감지할 수 있다.
✅ window.addEventListener("copy", handler)를 사용하면 텍스트 복사를 감지할 수 있다.
✅ window.addEventListener("offline", handler)를 사용하면 인터넷 연결이 끊어질 때 경고를 띄울 수 있다.
✅ window 객체를 활용하면 브라우저 전역에서 발생하는 이벤트를 감지할 수 있다.

이제 여러분도 다양한 window 이벤트를 활용하여 더욱 동적인 웹사이트를 만들어보세요! 😊