[JavaScript] 마우스 핸들링

마우스 이벤트 객체의 프로퍼티

프로퍼티
x, y	타겟 객체의 부모 객체(대부분 body=브라우저) 내에서의 마우스 좌표
clientX, clientY	브라우저 윈도우의 문서출력 영역 내에서의 마우스 좌표 (브라우저)
screenX, screenY	스크린을 기준으로 한 마우스 좌표 (컴퓨터 화면)
offsetX, offsetY	타겟 객체 내에서의 마우스 좌표 (HTML 태그)
button	눌러진 마우스 버튼 0 : 아무 버튼도 눌러지지 않았음 1 : 왼쪽 버튼이 눌러졌음 2 : 오른쪽 버튼이 눌러졌음 3 : 왼쪽, 오른쪽 버튼이 모두 눌러졌음 4 : 중간 버튼이 눌러졌음
wheelDelta	마우스 휠이 구른 방향 양수 : 위쪽으로 굴린 경우 (120) 음수 : 아래쪽으로 굴린 경우 (-120)

 

onclick과 ondblclick

onclick은 사용자가 HTML 태그를 클릭하였을 떄, ondblclick은 더블클릭하였을 떄 실행하는 이벤트리스너이다.

/* Script */
function calculate() {
  var exp = document.getElementById("exp");
  var result = document.getElementById("result");
  result.value = eval(exp.value);
}

<form>
  식 <input type="text" id="exp" value=""><br>
  값 <input type="text" id ="result"> 
  <input type="button" value=" 계산  "onclick="calculate()">
</form>

 

 

onmousedown, onmouseup / onmouseover, onmouseout / onwheel

onmousedown	HTML 태그에 클릭 유지
onmouseup	클릭 유지 해제
onmouseover	마우스가 HTML 태그 위로 올라오는 순간.
onmouseout	마우스가 HTML 태그를 벗어나는 순간.
onwheel	HTML 태그에 마우스 휠이 구르는 동안 계속 호출.

 

/* Script */
var width=1; // 테두리 두께
function down(obj) {
	obj.style.fontStyle = "italic";
}
function up(obj) {
	obj.style.fontStyle = "normal";
}
function over(obj) {
	obj.style.borderColor = "violet";
	// 테두리 폭이 0일 때 색은 보이지 않는다.
}
function out(obj) {
	obj.style.borderColor = "lightgray";
}
function wheel(e, obj) { // e는 이벤트 객체
	if(e.wheelDelta < 0) { // 휠을 아래로 굴릴 때
		width--; // 폭 1 감소
		if(width < 0) width = 0; // 폭이 0보다 작아지지 않게
	}
	else // 휠을 위로 굴릴 때
		width++; // 폭 1 증가
	obj.style.borderStyle = "ridge";
	obj.style.borderWidth = width+"px";
}

<div>마우스 관련 
	<span onmousedown="down(this)"
		  onmouseup="up(this)"
		  onmouseover="over(this)"
		  onmouseout="out(this)"
		  onwheel="wheel(event, this)"
	  	  style="display:inline-block">이벤트
	 </span>가 발생합니다.
</div>

 

 

onmousemove

마우스가 움직이는 동안 계속 호출된다.

/* Script */
var div = document.getElementById("div");
function where(e) {
	var text = "버튼=" + e.button + "<br>";
	text += "(screenX, screenY)=" + e.screenX + "," + e.screenY + "<br>";
	text += "(clientX, clientY)=" + e.clientX + "," + e.clientY + "<br>";
	text += "(offsetX, offsetY)=" + e.offsetX + "," + e.offsetY + "<br>";
	text += "(x, y)=" + e.x + "," + e.y + "\n";
	div.innerHTML = text;
}

이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고,  
마우스의 위치를 보여줍니다.
<br>
<br>
<img src="media/beach.png" onmousemove="where(event)"><br><br>
<div id="div"></div>

 

 

oncontextmenu

컨텍스트 메뉴(context menu)는 마우스 오른쪽 버튼을 클릭할 때 출력되는 메뉴이다. 컨텍스트 메뉴에는 보통 소스 보기나 이미지 다운로드 등의 기능을 둔다. 그래서 oncontextmenu 리스너에 false를 리턴하면 소스 보기나 이미지 다운로드를 할 수 없게 된다.

/* Script */
function hideMenu() {
	alert("오른쪽 클릭<컨텍스트 메뉴>금지");
	return false;
}
document.oncontextmenu=hideMenu;

마우스 오른쪽 클릭은 금지됩니다. 아무곳이나
클릭해도 컨텍스트 메뉴를 볼 수 없습니다.<br>
<img src="media/beach2.png" alt="miami">

 

 

 

<참고 교재>

http://webprogramming.co.kr/

명품 웹 프로그래밍