웹브라우저 자바스크립트 - 마우스
마우스 - https://opentutorials.org/course/1375/6766
마우스 이벤트는 pc환경에서 주로 사용하는 이벤트이다.
이벤트 타입
웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.
click
클릭했을 때 발생하는 이벤트.
dblclick
더블클릭을 했을 때 발생하는 이벤트
mousedown
마우스를 누를 때 발생
mouseup
마우스버튼을 땔 때 발생
mousemove
마우스를 움직일 때
mouseover
마우스가 엘리먼트에 진입할 때 발생
mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생
contextmenu
컨텍스트 메뉴가 실행될 때 발생(마우스 오른쪽버튼을 누르면 보이는 화면이 컨텍스트 메뉴이다)
키보드 조합
마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.
event.shiftKey
event.altKey
event.ctrlKey
마우스 포인터 위치
마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clientY를 사용한다.
<html>
<head>
<style>
body{
background-color: black;
color:white;
}
#target{
width:200px;
height:200px;
background-color: green;
margin:10px;
}
table{
border-collapse: collapse;
margin:10px;
float: left;
width:200px;
}
td, th{
padding:10px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="target">
</div> <!--녹색사각형부분-->
<!--테이블 부분-->
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td> <!--여기 td값사이에 값을 주는데 info 변수에 의해 값이 채워진다.-->
</tr>
</table>
<table>
<tr>
<th>key</th>
<th>info</th>
</tr>
<tr>
<td>event.altKey</td>
<td id="elmaltkey"></td>
</tr>
<tr>
<td>event.ctrlKey</td>
<td id="elmctrlkey"></td>
</tr>
<tr>
<td>event.shiftKey</td>
<td id="elmshiftKey"></td>
</tr>
</table>
<table>
<tr>
<th>position</th>
<th>info</th>
</tr>
<tr>
<td>event.clientX</td>
<td id="elemclientx"></td>
</tr>
<tr>
<td>event.clientY</td>
<td id="elemclienty"></td>
</tr>
</table>
<script>
var t = document.getElementById('target'); //녹색엘리먼트는 변수 t에 담는다.
function handler(event){
var info = document.getElementById('elm'+event.type); //핸들러가 호출되는 당시에 어떤 이벤트에 의해서 핸들러가 호출되는지 알려주는 이벤트객체의 프로퍼티 이다.
var time = new Date();
var timestr = time.getMilliseconds(); //현재 시간에 대한 밀리세컨값을 timestr 변수에 담는다.
info.innerHTML = (timestr); //info 값에 timestr값을 준다.
if(event.altKey){ //event.altKey가 ture일 경우 코드가 실행
document.getElementById('elmaltkey').innerHTML = timestr;
}
if(event.ctrlKey){ //event.ctrlKey가 ture일 경우 코드가 실행
document.getElementById('elmctrlkey').innerHTML = timestr;
}
if(event.shiftKey){ //event.shiftKey가 ture일 경우 코드가 실행
document.getElementById('elmshiftKey').innerHTML = timestr;
}
document.getElementById('elemclientx').innerHTML = event.clientX;
document.getElementById('elemclienty').innerHTML = event.clientY;
}
//똑같은 이벤트 핸들러를 t에게 장착시킴. 첫번째 인자는 이미 정해져있는 이벤트명들이다.
t.addEventListener('click', handler);
t.addEventListener('dblclick', handler);
t.addEventListener('mousedown', handler);
t.addEventListener('mouseup', handler);
t.addEventListener('mousemove', handler);
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler);
</script>
</body>
</html>
[결과화면]
