11주차 - jsp&js (20) <div>와 <span>에 onmouseover/onmouseout 사용해보자.
2022. 9. 19. 20:34ㆍjsp/java script
이번의 목표
01. <div>에 onmouseover/onmouseout 를 사용해보자.
02. <span>에도 사용해보고 비교해보자.
<div>은 길이를 조절하지 않으면 한줄을 전부 사용합니다.
<span>은 길이를 조절하지 않으면 요소만큼만 사용합니다.
이러한 특징 때문에 div와 span에 onmouseover/onmouseout, onmouseenter/onmouseleave를 사용 했을 때 약간의 차이점이 있습니다.
div에서는 같은줄에 마우스를 올리면 이벤트가 작동하지만,
span에서는 객체에 마우스를 올려야만 이벤트가 작동합니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex20</title>
<script type="text/javascript">
function mouse_over(obj) {
obj.innerHTML = "Mouse Out";
}
function mouse_out(obj) {
obj.innerHTML = "Mouse Over"
}
</script>
</head>
<body>
<h3>div에 사용한 예제</h3>
<div onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
Mouse Over
</div>
<hr>
<h3>span에 사용한 예제</h3>
<span onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
Mouse Over
</span>
</body>
</html>02. 실행 화면
See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.
① <div>에 이벤트를 두었을 때에는 내용은 없지만 같은줄에만 마우스를 올려도 이벤트가 작동하는 것을 확인할 수 있습니다.
② <span>에 이벤트를 두었을 때에는 객체에 마우스를 올려야만 이벤트가 작동하는 것을 확인할 수 있습니다.
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (22) onmouseup/onmousedown 으로 이미지를 바꿔보자 (0) | 2022.09.19 |
|---|---|
| 11주차 - jsp&js (21) onmousedown/onmouseup 으로 값을 바꿔보자 (0) | 2022.09.19 |
| 11주차 - jsp&js (19) onmouseover/onmouseout, onmouseenter/onmouseleave (0) | 2022.09.19 |
| 11주차 - jsp&js (18) 폰트 스타일을 변경해보자. (0) | 2022.09.19 |
| 11주차 - jsp&js (17) onchange (0) | 2022.09.19 |