<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM객체에 이벤트리스너 등록</title>
</head>
<body onload="init()">
<!-- onload는 페이지 출력이 완료되면 발생하는 이벤트 -->
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
<script>
//이벤트 처리를 자바스크립트의 DOM으로 처리한다.
let p;
function init() { // 문서가 완전히 로드되었을 때 호출
p = document.getElementById("p");
p.onmouseover = over;
/* - p DOM에 onmouseover이벤트리스너를 등록,
over는 이벤트 발생시 처리할 함수로 이름만 작성해야한다.(호출하면 에러 발생함, over())
*/
p.onmouseout = out;
}
function over() {
p.style.backgroundColor="orchid";
}
function out() {
p.style.backgroundColor="white";
}
</script>
</body>
</html>