[기본 문법 12] More Events

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

// 사용가능 event 확인
console.dir(h1);

function handleTitleClick() {
    console.log("h1 was clicked!");
    h1.style.color = "blue";
}

function handleMouseEnter() {
    console.log("mouse is here!");
    h1.innerText = "Mouse is here!";
    h1.style.color = "red";
}

function handleMouseLeave() {
    console.log("mouse is out!");
    h1.innerText = "Mouse is gone!";
    h1.style.color = "green";
}

function handleWindowResize() {
    document.body.style.backgroundColor = 'tomato';
}

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

function handeleWindowOffline() {
    alert("SOS NO WIFI")
}

function handeleWindowOnline() {
    alert("all good")
}

h1.onclick = handleTitleClick;
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handeleWindowOffline);
window.addEventListener("online", handeleWindowOnline);

 

*event를 사용하는 두 가지 방법
1. title.addEventListener("click", handleTItleClick);
2. title.onClick = handleTitleClick;

첫 번째 방법 더 선호.

*window object이용하기
1. resize event
코드 : window.addEventListener("resize", handleWindowResize);

2. copy event
3. wifi event

*body는 특별해서 document.body 이런 식으로 호출할 수 있음. 하지만
document.div 이런식으로 가지고 올 수 없음.