JavaScript-4

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

function handleTitleClick(){
    h1.style.color = "blue";
}

function handleMouseEnter(){
    h1.innerText = "Mouse is here!";
}

function handleMouseLeave(){
    h1.innerText ="Mouse is gone!";
}

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

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

function handleWindowOffiline(){
    alert("SoS no WIFI")
}

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

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

• 이벤트 리스너는 자주 사용되고, 마우스를 올려놓고나, 내려놓으면 글자가 바뀌고, 클릭 시 색깔들이 바뀐다.

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

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor === "blue"){
        newColor ="tomato";
    } else {
        newColor = "blue";
    }
    h1.stlye.color = newColor;
}
h1.addEventListener("click", handleTitleClick);

• 클릭할때마다 파란색으로 바뀌고, 주황색으로 바뀐다.

• step 1 element를 찾아라
  step 2 event를 listen 해라
  step 3 그 event에 반응해라