📃노마드코더 Vanilla JS 메모2

onmouseEvent

const h1 = document.querySelector(".hello h1");
h1.innerText = "Click Me"

function handleTitleClick(){
    console.log("title was clicked!")
    h1.style.color = "blue";
}
function handleTitleMouseEnter(){
    h1.innerText = "Mouse is here!";
}
function handleMouseLeave(){
    h1.innerText = "Mouse is gone";
}

h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleTitleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

h1 변수 선언(class="hello"의 h1 태그 선택)
h1의 innerText를 "Click Me"로 변경

addEventListener를 사용하여 "click", "mouseenter", "mouseleave" 등의 이벤트를 추가하고 함수를 통해 실행.

h1.onclick = handleTitleClick; 과
h1.addEventListener("click", handleTitleClick); 은 같은 동작을 함.
후자가 나중에 removeEventListener를 통해 event listener를 제거할 수 있어서 더 선호

function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
    alert("copier!");
}

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

resize이벤트를 통해 window 창의 사이즈가 바뀔 때 색상 변경("resize")
document.body에 bgckground color값을 줌.
복사를 인식하는 copy이벤트도 있음("copy")

function handleWindowOffLine(){
    alert("SOS no WIFI");
}
function hadleWindowOnLine(){
    alert("All Good!");
}

window.addEventListener("offline", hadleWindowOffLine);
window.addEventListener("online", handleWindowOnLine);

와이파이 연결을 인식하는 이벤트("offLine", "onLine")
나는 왜 안되지..