프로그래밍 문법/javascript

이벤트 발생에 따른 처리

씩씩한 IT블로그 2022. 6. 5. 13:56
반응형

HTML코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Momentum</title>
    </head>
    <body>
        <div class="divClass">
            <h1 class="h1Class" id="line1">this is h1 1</h1>
            <h1 class="h1Class">this is h1 2</h1>
            <h1 class="h1Class">this is h1 3</h1>
            <h1 id="clickChangeColor">click to change color</h1>
            <h1 id="clickChangeClass">click to change class</h1>
            <h1 id="mouseOver">mouse over</h1>
            <h2>this is h2</h2>
            <h3>this is h3</h3>
        </div>   
        <h2>this is h2(out of div)</h2>
        <script src="app.js"></script>
    </body>
</html>

 

JS코드

// -------------------------------[이벤트동작]-------------------------------

// 1. 클릭으로 색깔 바꾸기
function handleTitleClickColor() {
    // element가 블루면 토마토, 토마토면 블루로
    const nowColor = changeColorElement.style.color;
    let newColor;

    if (nowColor==="blue") {
        newColor = "tomato";
    }
    else { 
        newColor = "blue";
    }
    changeColorElement.style.color = newColor  
}
const changeColorElement = document.getElementById("clickChangeColor"); 
changeColorElement.addEventListener("click",handleTitleClickColor);

// 2. 클릭으로 클래스 추가, 제거하기
function handleTitleClickAdd() {
    //clicked가 없을때 추가 있으면 제거
    const clickedClass = "clicked";
    if (changeColorElement.classList.contains(clickedClass)) {
        changeColorElement.classList.remove(clickedClass)
    } else {
        changeColorElement.classList.add(clickedClass)
    }   
}

function handleTitleClickToggle() {
    //clicked가 없을때 추가 있으면 제거
    changeColorElement.classList.toggle("clicked")
}

const changeClassElement = document.getElementById("clickChangeClass"); 
changeClassElement.addEventListener("click",handleTitleClickAdd);
// changeClassElement.addEventListener("click",handleTitleClickToggle);


// 3. 마우스오버로 글자 바꾸기
function handleMouseEnter() {
    mouseOverElement.innerText = "mouse is here!"
}

function handleMouseLeave() {
    mouseOverElement.innerText = "mouse is out!"
}

const mouseOverElement = document.getElementById("mouseOver"); 
mouseOverElement.addEventListener("mouseenter",handleMouseEnter);
mouseOverElement.addEventListener("mouseleave",handleMouseLeave);

// 4. 윈도우 크기를 변화시키면 배경색이 바뀜
function changeBackColor() {
    // 배경색깔을 바꿈
    document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize",changeBackColor); // 윈도우 크기를 변화시키면

// 5. 복사를 하면 알람이 옴
function makeAlert() {
    alert("copier!")
}
window.addEventListener("copy",makeAlert); // 복사를 하면 알람 

// 6. 와이파이 끊기거나 연결되면 알람이 옴
function allertNoWifi() {
    alert("no wifi!")
}

function allertYesWifi() {
    alert("yes wifi!")
}
window.addEventListener("offline",allertNoWifi); //와이파이가 끊기면 알람
window.addEventListener("online",allertYesWifi); //와이파이가 연결되면 알람

 

 

반응형