1. window 객체의 load 이벤트
● DOM 객체의 이벤트 속성
- DOM 객체의 속성 중 on으로 시작하는 속성을 이벤트 속성이라고 함
- 이러한 이벤트 속성에는 함수를 할당해 이벤트가 발생했을 때 자동으로 함수가 실행되도록 함
● window 객체의 load 이벤트
- load 이벤트는 window 객체의 로드가 완료되면 발생
- HTML 문서에 존재하는 모든 태그를 읽은 다음이나, 화면에 나오는 순간이 window 객체의 로드가 완료되는 시점
2. window 객체의 addEventListener 메서드
addEventListener
- 윈도우에 이벤트 핸들러 연결
| document . addEventListener( event, function, [useCapture] ) |
3. 윈도우·객체 이벤트 종류
연습문제
: id 속성이 "html"인 요소 다음에 나오는 요소의 글자 색상은 파란색, 그 요소 다음에 나오는 요소의 글자 색을 빨간색으로 바꾸는 프로그램을 작성하라. 단, script 태그는 head 요소 내에 작성해야한다(window 객체의 load 이벤트 연결).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css">
<style>
body {
background-color: black;
}
ul {
width: 500px;
margin: 50px auto;
text-align: center;
color: white;
}
ul > li {
padding: 10px;
border: 1px solid white;
}
</style>
<!-- script의 내용은 원래 body 요소가 아닌 head 요소에 작성해야 한다.
그러나 body 요소에서 작성한 것처럼 head 요소에도 똑같이 작성하면 제대로 실행되지 않는다 -->
<script>
window.addEventListener("load", function () {
// head 요소에 script 내용을 작성하면서 그 기능을 제대로 실행하게 하는 방법
// 이벤트 핸들러: window 객체에 load 이벤트가 발생하면 실행할 기능
// → 브라우저가 HTML 문서의 내용을 모두 읽고 해석한 다음 발생하는 이벤트
// → 따라서 이 이벤트 핸들러에서는 DOM에 있는 요소들에 정상적으로 접근할 수 있다.
var html = document.getElementById("html");
html.style.color = "blue";
html.nextElementSibling.style.color = "red";
// → element.nextElementSibling → element 객체의 다음 형제 요소를
// 나타내는 Element 객체의 속성을 나타낸다.
}); // window.onload
</script>
</head>
<body>
<ul>
<li id="html">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Portpolio</li>
</ul>
</body>
</html>