웹브라우저 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. average8294
    코드의 마지막 click메서드를 사용하실때 ( ) 괄호를 안붙이신거 같습니다.

    댓글이 좀 지났지만 저도 궁금해서 한번 찾아봤습니다 ㅎㅎ
    구글링해보니까 바로나오네요.

    'document.getElementsByClassName('cl-control cl-button cl-unselectable btn_navyL mini xi-search after cl-grid-ctrl-inherit')[0].click()' <<---
    대화보기
    • 파이팅
      안녕하세요! 좋은 강의 올려주셔서 너무 감사합니다

      근데 질문이 있어서 이렇게 댓글을 올립니다 ㅎㅎ

      한 페이지에서 click 이벤트를 실행하고 싶은데 말씀 주신 대로 이벤트를 실행 했지만

      'ƒ click() { [native code] }' 이와 같은 문구로 나오면서 클릭 이벤트가 정상적으로 작동되지 않습니다

      코드는 'document.getElementsByClassName('cl-control cl-button cl-unselectable btn_navyL mini xi-search after cl-grid-ctrl-inherit')[0].click' 이런 식으로 작성하였는데

      해결 방법이 있을까요??
    • 임앤강
      2022-02-17 감사합니다.
    • 드림보이
      2022.01.04. 이벤트 타입 - 마우스 파트 수강완료
    • pmxsg
      2021.12.23. 수강
    • labis98
      20210914 좋은 강의 감사합니다.
    • 박병진
      2020.12.12 완료
    • 싸알
      완료
    • anne
      완료
    • switpotato
      어려워서 일단 빨리 들어보고다시 복습하렵니다.
    • 황지환
      어려워서 몇번은 봐야될듯 감사합니다
    • 정승옥
      완료
    • 준바이
      감사합니다
    • Gritter
      감사합니다.
    • 굼벵이
      완료
    • JuicyFresh
      감사합니다
    • 열공아이티
      감사합니다.
    • 박인호
      1-3
      수강완료.
      마우스에서 발생하는 이벤트가 참 많군요.
    • Byungsoo Kim
      감사합니다. <<<
    • kimyj@ains.co.kr
      매우 감사합니다!!!!
    • illliilllliillliii
      이고잉님 최고에요! 감사합니다 !
    • crable
      감사합니다.
    • Byeong Heon Lee
      항상 감사합니다~
    • 신입1
      감사합니다
    • tachyon
      감사합니다
    • JustStudy
      2016.07.13 수
      고맙습니;다 3.
    • JustStudy
      2016.07.03 일
      고맙습니다 2.
    • 이주환
      2016. 04. 28
      잘보고갑니다.
    • JustStudy
      고맙습니다
    • WayneKing
      또 과부하군요.
      리스터 참 많네요...
    • 자스입문
      var info = document.getElementById('elm'+event.type); 여기서 많이 해멧습니다 ㅠ
      표에 어느 칸에 정보를 입력할지 정하는 부분 인거 같은데 event..type만으로 그냥 스위치문으로 해주셨으면 초보자에겐 좋았을 텐데 ㅠㅠ 문자열상수와 문자열 변수를 더하는거는 많이 봐왔지만 그것이 또 아이디값으로 적용되는걸 보고 참신했습니다. 자주쓰이는 기법인가요?
    • sudmongki
      지금까지 공부한 내용중 가장 놀라운 내용이 아닌가 싶습니다.
      좋은 강의 정말 고맙습니다.
      다만, 한가지 느낀점은 변수의 이름이 객체나 프로퍼티랑 같은게 많아서 햇갈릴때가 많습니다.
      ㅠ.,ㅠ 변수의 이름을 변수의 이름답게 지어주실순 없을까요?
      한글이나 뭐 사람 이름같은걸로 지어주시면 덜 헷갈릴거 같습니다
      좋은 하루되세요
    • 2015-11-13 (오늘은 금요일 ㅜ.ㅜ무서워라)
      잘 봤습니다.
    • 코딩!
      마우스 이벤트!
    • 골뱅이미디어스크린앤드
      햐...멋지다.
      강의 잘 보고 있어요.감사합니다^^
    • hongyver
      네이버 같은데서 드래그드랍으로 파일 첨부하려는걸 보고 있는데

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

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