JSP - JavaScript mousedown, mouseup (2022-09-16)
2022. 9. 18. 22:07ㆍ3층 1구역 - 개발의 장/JSP
1. 서론
이번엔 mousedown, mouseup의 대한 이벤트이다.
mousedown은 마우스를 누르고 있을 때 바뀌는 이벤트이다.
mouseup은 반대로 마우스를 뗐을 때 바뀌는 이벤트 이다.
예제를 통해 알아보도록 하자.
2. 본론
<%@ 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">
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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex22</title>
<script type="text/javascript">
function mouse_down(obj){
obj.src = "/jsExam/images/images/lighton.png";
}
function mouse_up(obj) {
obj.src = "/jsExam/images/images/lightoff.png";
}
</script>
</head>
<body>
<img src="/jsExam/images/images/lightoff.png" onmousedown="mouse_down(this)" onmouseup="mouse_up(this)" width="281px" height="495px">
<br> Click mouse and hold down!
</body>
</html>'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글
| JSP - JavaScript Alert과 confirm (2020-09-16) (0) | 2022.09.18 |
|---|---|
| JSP - JavaScript 다음 페이지로 넘기기 (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript mouseover, mouseout (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 클릭 이벤트(이미지 변화, 텍스트 옮기기, 객체 스타일 변화) (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 텍스트 글씨가 출력(버튼과 포커스)됨 (2022-09-16) (0) | 2022.09.18 |