(JavaScript) 이벤트 및 DOM 스타일 로드 및 언로드

by

로드 이벤트

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        // 아직 해당 태그를 읽지 않았기 때문에 제대로 된 값이 나오지 않는다. 
        let h1 = document.getElementById("h1");
        console.log(h1);
				
				//모든 작업이 로드가 완료된 이후에 실행됨. 가장 마지막에 출력.
        window.onload = function() {
            console.log(document.getElementById("h1"), 2);
        }
    </script>
</head>
<body>
    <h1 id="h1">Hellow java</h1>
    <script>
        let h2 = document.getElementById("h1");
        console.log(h2);
    </script>
</body>
</html>

언로드된 이벤트

구간 무효화 → 로그아웃 버튼으로 로그아웃

시간 초과 → 시간 경과 후 자동 로그인

해당 창을 닫을 때 → 로그인이 해제됨

'추천 관련글,

내용 변경(변경, 키업) 시 Unload 이벤트 호출, 저장 버튼 클릭 시 Unload 이벤트 해제

DOM 스타일

버튼 클릭 시 배경색 변경

document.getElementById("btn").onclick = function() {
    if(document.body.style.backgroundColor === "skyblue") {
        document.body.style.backgroundColor = "white"
    } else {
        document.body.style.backgroundColor = "skyblue"
    }  
}