11주차 - jsp&js (21) onmousedown/onmouseup 으로 값을 바꿔보자
2022. 9. 19. 20:51ㆍjsp/java script
이번의 목표
01. onmousdown/onmouseup 을 사용해보자.
지난 시간엔 마우스를 객체에 올릴때와 객체에서 나왔을 때에 작동하는 이벤트를 알아봤습니다.
이번시간엔 객체를 마우스로 클릭하고 있을 때, 클릭을 풀었을 때 작동하는 이벤트를 알아보겠습니다.
onmousedown는 마우스를 클릭하고 있을 때 작동하는 이벤트입니다.
onmouseup 은 마우스 클릭을 풀었을 때 작동하는 이벤트입니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex21</title>
<script type="text/javascript">
// onmousedown, onmouseup은 마우스가 위로 아래로 간다는것과는 다르다!
function mouse_down(obj) {
obj.innerHTML = "마우스 버튼을 누르고 있어요.";
}
function mouse_up(obj) {
obj.innerHTML = "마우스 버튼을 누르고 있지 않아요."
}
</script>
</head>
<body>
<div onmousedown="mouse_down(this)" onmouseup="mouse_up(this)">
클릭하세요.</div>
</body>
</html>02. 실행 화면
See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.
① 마우스를 클릭하면 값이 "마우스 버튼을 누르고 있어요" 로 바뀌는 것을 확인할 수 있습니다.
② 마우스 클릭을 해제하면 값이 "마우스 버튼을 누르고 있지 않아요"로 바뀌는 것을 확인할 수 있습니다.
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (23) window.history.forward() / window.history.back() (0) | 2022.09.19 |
|---|---|
| 11주차 - jsp&js (22) onmouseup/onmousedown 으로 이미지를 바꿔보자 (0) | 2022.09.19 |
| 11주차 - jsp&js (20) <div>와 <span>에 onmouseover/onmouseout 사용해보자. (0) | 2022.09.19 |
| 11주차 - jsp&js (19) onmouseover/onmouseout, onmouseenter/onmouseleave (0) | 2022.09.19 |
| 11주차 - jsp&js (18) 폰트 스타일을 변경해보자. (0) | 2022.09.19 |