제목에서 " Q " 가 있는 경우는 해결하지 못한 궁금증이 있는 글들입니다.
JavaScript 에서 Events 기능 정리
■ Mouseover & Mouseout
하나의 element(변수)에 두개의 EventsListener 를 할당 할 수 있으며 JS는 두 가지를 함께 실행 한다.
[ 준비 코드 ]
<!DOCTYPE html>
<html lang="en">
<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>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 myDiv = document.querySelector('div');
</script>
</body>
</html>
<div>에 해당하는 빨간 box에 마우스를 가져다 대면 <h1>안의 글씨가 innerHTML = "The mouse is over the box"로 바뀜.
그런데 이렇게 코드를 작성하면 한번 마우스를 가져다 댄 이후 계속 " The mouse is over the box " 상태로 유지된다.
마우스를 가져다 대었을 때만 문구를 바꾸거나 떼었을 때는 또 다른 문장으로 변환하고 싶다면 아래와 같이 코드를
추가 작성해주면 된다.
1. mouserover
2. mouserout
그렇다면 결과는 이렇게 짜잔 !!
진짜 진짜 마지막으로, <h1>부분의 문구를 <h1>에 마우스를 가져다 대었을 때 원래의 "Roll your mouse over the box"로
돌아가고 싶다면 아래의 코드만 한번 더 추가해주면 된다.
'Programming > Java Script' 카테고리의 다른 글
| [Coursera x K-mooc] JS2 : MD-01 [ jQuery 란, jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ] (0) | 2022.11.29 |
|---|---|
| coursera week 4 (0) | 2022.11.24 |
| [Q-틈새 JS 기초] Submit Events + data 도착지 지정 : action (0) | 2022.11.18 |
| [🍭JS 기초] Property 란 ?? (프로퍼티) (0) | 2022.11.18 |
| [K-MOOC x Coursera ] JavaScript Basic - Module 3 : Events (0) | 2022.11.16 |