js) 이벤트 및 if문 활용

console.dir()에서 on이 앞에 붙어있는 것은 이벤트이다.

---

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

function handleMouseEnter(){
    console.log("mouse is here!");
}

title.addEventListener("mouseenter", handleMouseEnter)

마우스 위로 올라가면 콘솔에 뜬다.

---

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

function handleTitleClick() {
    title.style.color = "blue";    
}
function handleMouseEnter(){
    title.innerText = "Mouse is here!"
}
function handleMouseLeave(){
    title.innerText = "Mouse is gone!"
}

//title.addEventListener("click", handleTitleClick) 아래 처럼도 표현 가능
title.onclick = handleTitleClick;
title.addEventListener("click", handleMouseLeave)
title.addEventListener("mouseenter", handleMouseEnter)

마우스 위에 올리면 here 내리면 gone 클릭하면 색 블루

---

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

이렇게 하고 f12 누르면 배경 토마토색

---

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

복사하면 copier라고 뜬다

---

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.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

let로 업데이트 할 수 있게해준다. 그리고 h1.style.color = newColor로 해줘서 색을 변경해준다.

---

.active{
    color: tomato;
}

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

function handleTitleClick() {
   h1.className = "active";
}

h1.addEventListener("click", handleTitleClick);

이렇게하면 html css js 서로 연결

---

function handleTitleClick() {
    if (h1.className === "active"){
        h1.className = ""
    } else{
        h1.className = "active"
    }
}

이렇게 바꿔줘도 위와 같은 기능

---

function handleTitleClick() {
    const clickedClass = "clicked"
    if (h1.className === clickedClass){
        h1.className = ""
    } else{
        h1.className = clickedClass
    }
}

이렇게 해줘야 에러를 줄일 수 있다.

---

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

function handleTitleClick() {
    const clickedClass = "clicked"
    if (h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else{
        h1.classList.add(clickedClass)
    }
}

h1.addEventListener("click", handleTitleClick);

이렇게 해주면 이전에 있는 className도 보존이 가능하다

---

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

function handleTitleClick() {
    h1.classList.toggle("clicked")
}

h1.addEventListener("click", handleTitleClick);

toggle는 클래스 이름에 clicked이 있으면 제거해주고 없으면 추가해준다.