Javascript 이벤트 타입 - 마우스

 

마우스

 

 

 

이벤트 타입

 

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

 

• click : 클릭했을 때 발생하는 이벤트. 

 

• dblclick : 더블클릭을 했을 때 발생하는 이벤트

 

• mousedown : 마우스를 누를 때 발생

 

• mouseup : 마우스버튼을 땔 때 발생

 

• mousemove : 마우스를 움직일 때

 

• mouseover : 마우스가 엘리먼트에 진입할 때 발생

 

• mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생

 

• contextmenu : 컨텍스트 메뉴가 실행될 때 발생

 

 

 

아래의 예제처럼 쓰인다. 자바스크립트 문서의 일부분.

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

 

 

 

 

 

 

 

 

 

키보드 조합

 

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

 

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

 

아래의 예제와 같이 쓰인다. 자바스크립트 문서의 일부분

 if(event.altKey){
                document.getElementById('알트키').innerHTML = timestr;
            }
            if(event.ctrlKey){
                document.getElementById('컨트롤키').innerHTML = timestr;
            }
            if(event.shiftKey){
                document.getElementById('쉬프트키').innerHTML = timestr;
            }

 

 

 

 

 

 

 

 

 

마우스 포인터 위치

 

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

 

 

아래의 예제처럼 이용한다.

            document.getElementById('x').innerHTML = event.clientX;
            document.getElementById('y').innerHTML = event.clientY;