[Javascript] 마우스 이벤트

이벤트 타입

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

• click
  클릭했을 때 발생하는 이벤트. 
• dblclick
  더블클릭을 했을 때 발생하는 이벤트
• mousedown
  마우스를 누를 때 발생
• mouseup
  마우스버튼을 땔 때 발생
• mousemove
  마우스를 움직일 때
• mouseover
  마우스가 엘리먼트에 진입할 때 발생
• mouseout
  마우스가 엘리먼트에서 빠져나갈 때 발생
• contextmenu
  컨텍스트 메뉴가 실행될 때 발생

키보드 조합

마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.

• event.shiftKey
• event.altKey
• event.ctrlKey

마우스 포인터 위치

마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clientY를 사용한다..

<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>

위 코드는 target을 id로 가진 엘리먼트에 마우스 이벤트를 발생시키는 기능을 가진다.

h함수 handler는 event객체를 가지며

info 값으로 ele+이벤트의 타입(click, dbclick...)

time 값으로 현재 date

timestr값으로 getMilliseconds(현재 시간을 밀리세컨드로 만든 값)

을 받았다.

그리고 info에 timestr값을 출력했다.

그리고 추가적으로 

가정문은 키보드 이벤트를

그 아래는 마우스의 x,y위치를 리턴한다.