11주차 - jsp&js (19) onmouseover/onmouseout, onmouseenter/onmouseleave
2022. 9. 19. 20:05ㆍjsp/java script
이번의 목표
01. onmouseover/onmouse out 에 대해 알아보자
02. onmouseenter/onmouseleave 에 대해 알아보자.
마우스를 올렸을때, 마우스가 나왔을 때 작동하는 이벤트는 각각 두개씩 존재합니다.
마우스를 올릴 때에는 onmouseover과 onmouseenter가 있습니다.
마우스가 나왔을 때에는 onmouseout과 onmouseleave가 있습니다.
그리고 위의 네가지를 다른 기준으로 나누자면
내부 요소와의 관계로 구분할 수 있습니다.
내부 요소에도 영향을 끼치는 것은 onmouseenter/onmouseleave 입니다.
내부 요소에는 영향을 끼치지 않는 것은 onmouseover/onmouseout 입니다.
어떻게 구분짓고 기억하는게 편한지는 개인의 차이가 있기 때문에 표로 보면 쉽겠습니다.
| 종류 | 마우스 올릴 때 | 마우스 나올 때 |
| 내부 요소 영향을 끼치는 것 | onmouseenter | onmouseleave |
| 내부요소에 영향을 끼치지 않는 것 | onmouseover | onmouseout |
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex19</title>
<script type="text/javascript">
function onmouseout_exam() {
h1_id = document.getElementById("h1_id")
h1_id.innerHTML = "exam1";
h1_id.style.background = "aqua";
h1_id.style.border = "2px solid red";
}
function onmouseover_exam() {
h1_id = document.getElementById("h1_id")
h1_id.innerHTML = "exam1";
h1_id.style.background = "pink";
}
function onmouseenter_exam() {
h2_id = document.getElementById("h2_id")
h2_id.innerHTML = "exam2";
h2_id.style.background = "pink";
}
function onmouseleave_exam() {
h2_id = document.getElementById("h2_id")
h2_id.innerHTML = "exam2";
h2_id.style.background = "aqua";
h2_id.style.border = "2px solid red";
}
</script>
<style type="text/css">
.box {
position:relative;
background: gray;
height: 200px;
width: 300px;
margin: auto;
text-align: center;
line-height: 80px;
}
label{
padding: 20px;
}
</style>
</head>
<body>
<div id="box1" onmouseout="onmouseout_exam()"
onmouseover="onmouseover_exam()" class="box">
<h3>onmouseout/onmouseover</h3>
<label id="h1_id">exam1</label>
</div>
<hr>
<div id="box2" onmouseenter="onmouseenter_exam()"
onmouseleave="onmouseleave_exam()" class="box">
<h3>onmouseenter/onmouseleave</h3>
<label id="h2_id">exam2</label>
</div>
</body>
</html>02. 실행 화면
See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.
① onmouseout/onmouseover 에서는 마우스가 텍스트 범위까지만 들어가도 구역을 벗어난 것으로 인식하여 이벤트가 작동되는 것을 확인할 수 있습니다.
② onmouseenter/onmouseleave 에서는 마우스가 텍스트 위로 올라가도 범위 내에 있는 것으로 인식하여 이벤트가 작동하지 않는 것을 확인할 수 있습니다.
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (21) onmousedown/onmouseup 으로 값을 바꿔보자 (0) | 2022.09.19 |
|---|---|
| 11주차 - jsp&js (20) <div>와 <span>에 onmouseover/onmouseout 사용해보자. (0) | 2022.09.19 |
| 11주차 - jsp&js (18) 폰트 스타일을 변경해보자. (0) | 2022.09.19 |
| 11주차 - jsp&js (17) onchange (0) | 2022.09.19 |
| 11주차 - jsp&js (16) onclick으로 이미지를 변경하기 (0) | 2022.09.19 |