웹브라우저 JavaScript

마우스

이벤트 타입

웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.

  • 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>
			</tr>	
			<tr>
				<td>dblclick</td>
				<td id="elmdblclick"></td>
			</tr>
			<tr>
				<td>mousedown</td>
				<td id="elmmousedown"></td>
			</tr>			
			<tr>
				<td>mouseup</td>
				<td id="elmmouseup"></td>
			</tr>			
			<tr>
				<td>mousemove</td>
				<td id="elmmousemove"></td>
			</tr>			
			<tr>
				<td>mouseover</td>
				<td id="elmmouseover"></td>
			</tr>			
			<tr>
				<td>mouseout</td>
				<td id="elmmouseout"></td>
			</tr>
			<tr>
				<td>contextmenu</td>
				<td id="elmcontextmenu"></td>
			</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');
		function handler(event){
			var info = document.getElementById('elm'+event.type);
			var time = new Date();
			var timestr = time.getMilliseconds();
			info.innerHTML = (timestr);
			if(event.altKey){
				document.getElementById('elmaltkey').innerHTML = timestr;
			}
			if(event.ctrlKey){
				document.getElementById('elmctrlkey').innerHTML = timestr;
			}
			if(event.shiftKey){
				document.getElementById('elmshiftKey').innerHTML = timestr;
			}
			document.getElementById('elemclientx').innerHTML = event.clientX;
			document.getElementById('elemclienty').innerHTML = event.clientY;
		}
		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>

댓글

댓글 본문
작성자
비밀번호
  1. tachyon
    감사합니다
  2. JustStudy
    2016.07.13 수
    고맙습니;다 3.
  3. JustStudy
    2016.07.03 일
    고맙습니다 2.
  4. 이주환
    2016. 04. 28
    잘보고갑니다.
  5. JustStudy
    고맙습니다
  6. WayneKing
    또 과부하군요.
    리스터 참 많네요...
  7. 자스입문
    var info = document.getElementById('elm'+event.type); 여기서 많이 해멧습니다 ㅠ
    표에 어느 칸에 정보를 입력할지 정하는 부분 인거 같은데 event..type만으로 그냥 스위치문으로 해주셨으면 초보자에겐 좋았을 텐데 ㅠㅠ 문자열상수와 문자열 변수를 더하는거는 많이 봐왔지만 그것이 또 아이디값으로 적용되는걸 보고 참신했습니다. 자주쓰이는 기법인가요?
  8. sudmongki
    지금까지 공부한 내용중 가장 놀라운 내용이 아닌가 싶습니다.
    좋은 강의 정말 고맙습니다.
    다만, 한가지 느낀점은 변수의 이름이 객체나 프로퍼티랑 같은게 많아서 햇갈릴때가 많습니다.
    ㅠ.,ㅠ 변수의 이름을 변수의 이름답게 지어주실순 없을까요?
    한글이나 뭐 사람 이름같은걸로 지어주시면 덜 헷갈릴거 같습니다
    좋은 하루되세요
  9. 2015-11-13 (오늘은 금요일 ㅜ.ㅜ무서워라)
    잘 봤습니다.
  10. 코딩!
    마우스 이벤트!
  11. 골뱅이미디어스크린앤드
    햐...멋지다.
    강의 잘 보고 있어요.감사합니다^^
  12. hongyver
    네이버 같은데서 드래그드랍으로 파일 첨부하려는걸 보고 있는데

    <p class="drag_here _d6(mwAttach|dragoverFileHtml5) _d7(mwAttach|dropFileHtml5)" style="display: block;">마우스로 파일을 끌어오세요.</p>

    class 에 drag_here 는 CSS 에 있지만 _d6(....|....) 는 없는데 이걸 도대체 어떻게 이해를 해야하나요?
    찾아보니 mwAttach.dragoverFileHtml5 라는 함수가 있긴하는데 이걸 어떻게 이해해야하는지 모르겠네요?
  13. egoing
    아래의 코드에서 event는 변수의 이름에 불과합니다.
    function handler(event){
    대화보기
    • Quan Lee
      여기서 event는 정해진 객체인가요? 꼭 event로만 써야하는지요? 문서에 있는 event를 전부 다른 걸로 바꿔도 결과 출력에는 문제 없는데요? 왜서지요?
    • 열공이
      이거어디에쓰나요? 무지실용적인거같은데,,,예를추가해서 강의해주시면 정말많은 도움이되겠거등요
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기