3.5 More Events

강의

event는 저번 강의때 배운 mouseenter, mouseleave 뿐만 아니라 정말 다양한 기능들이 많다. 오늘을 여러 event들에 대해 알아보자!

오늘 배울건 window의 interface 또는 object이다.

Event 적용 방법

(1) addEventListener()를 통해서 event들을 listen

title.addEventListener("click",handleTitleClick);
title.addEventListener("mouseenter",handleMouseEnter);

(2) oneventname property에 event listener를 할당함으로써 event를 listen

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;

니꼬가 addEventListener를 더 선호하는 이유는, 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문이다.

---

window로 돌아와서!

document가 JS에서 기본적으로 제공되듯이 window도 기본적으로 제공된다.

Resize 하면 실행되는 Event

function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize,handleWindowResize");

body부분이 꽤 중요하다. document의 body,head, title 이런것들을 중요하기 때문에 콘솔창에 document.body 이런 식으로 적을 수 있다. 이 요소들을 제외하고는 querySeletor나 getElementById 등으로 찾아와야 한다.

document.body.style.backgroundColor = "tomato"; 여기서 body는 중요한? 요소라서 전에 했던 방식처럼 변수를 지정해서 title.style.color 이런식으로 하는게 아니다!! document는 우리가 지정한 변수가 아니라 걍 원래부터 있는 object이다!! 중요한 사실이니 잊지말자!!

우리는 h1을 resize할 수 없고, window를 resize 할 수 있다.

---

복사하면 실행되는 Event

function handleWindowCopy(){
    alert("copier!");
}
window.addEventListener("copy",handleWindowCopy);

---

wifi에 연결 돼있는지 확인하는 방법

function handleWindowOffline(){
    alert("SOS no WIFI");
}
function handleWindowOnline(){
    alert("ALL GOOOOD");
}
window.addEventListener("offline",handleWindowOffline);
window.addEventListener("online",handleWindowOnline);

이 단순한 event들이 JS가 멋진이유다!! ( •̀ ω •́ )✧