<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events</title>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<h1>Roll your mouse over the box</h1>
<div></div>
<script>
var heading = document.querySelector('h1');
var box = document.querySelector('div');
box.addEventListener('mouseover', function(){
heading.innerHTML = "The mouse is over the box";
});
box.addEventListener('mouseout', function(){
heading.innerHTML = "The mouse has left the box";
});
box.addEventListener('mouseover', function(){
heading.innerHTML = "Roll your mouse over the box";
});
</script>
</body>
</html>event(red 박스에 마우스 호버를 올리냐 나오느냐)에 따라서 텍스트 문구가 달라짐
= 각 이벤트에 따라 다르게 반응한다!
'Programming > JavaScript' 카테고리의 다른 글
| Window Resizing (0) | 2022.03.11 |
|---|---|
| Capturing Scroll Events (0) | 2022.03.11 |
| Event.preventDefault() (0) | 2022.03.11 |
| Sequence selection loop (0) | 2022.03.09 |
| While Loops (0) | 2022.03.09 |