<!DOCTYPE html>
<html lang="ko">
<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" />
<title>DOM_event</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
let img = document.querySelector(".img > img");
// 방법1.
img.onmouseover = over;
img.onmouseout = out;
function over() {
img.src = "./images/new01_on.jpg";
}
function out() {
img.src = "./images/new01_off.jpg";
}
// 방법2. (addEventListener)
img.addEventListener("mouseover", over);
img.addEventListener("mouseout", out);
function over() {
img.src = "./images/new01_on.jpg";
}
function out() {
img.src = "./images/new01_off.jpg";
}
// 방법3. (addEventListener 축약)
img.addEventListener("mouseover", () => {
img.setAttribute("src", "./images/new01_on.jpg");
});
img.addEventListener("mouseout", () => {
img.setAttribute("src", "./images/new01_off.jpg");
});
// 방법4. (this)
img.addEventListener("mouseover", function () {
this.setAttribute("src", "./images/new01_on.jpg");
// 여기서 화살표 함수를 쓰면 this가 화살표 함수를 받게 됨.
// 화살표는 아무것도 가지고 있지않음. 결론은 실행안됨. 화살표 함수 쓰지말것.
});
img.addEventListener("mouseout", function () {
this.setAttribute("src", "./images/new01_off.jpg");
});
});
</script>
</head>
<body>
<div class="img">
<img src="./images/new01_off.jpg" alt="mouse over event" />
</div>
</body>
</html>