[DOM 이벤트] MouseEvent Object

 1. altKey, shiftKey, ctrlKey, metaKey

이벤트가 발생될때, 해당 키(alt, shift, ctrl, meta) 키가 눌렸는지 여부를 알 수 있다. button 프로퍼티와 다른점은 이 프로퍼티는 모든 타입의 마우스 이벤트에 대해 유효하다.

(*Meta 키란? 윈도우 기준으로 윈도우 심볼이 박혀있는 키이다. 정확한 기능 및 의미는 모른다.)

    <input type="text" id="txt"/>
    <script>
        var txt = document.getElementById("txt")
        txt.onkeydown = function(event){
            if(event.altKey){
                alert("알트키가 눌렸습니다.")
            } else if(event.ctrlKey){
                alert("컨트롤키가 눌렸습니다.")
            } else if(event.shiftKey){
                alert("쉬프트키가 눌렸습니다.")
            }else if(event.metaKey){
                alert("메타키가 눌렸습니다.")
            }
        }
   </script>
 

2.button

mousedown, mouseup, click 등 마우스 이벤트가 발생할때, 마우스의 버튼 숫자를 반환한다.

    <script>
        document.onmousedown= function(event){
            alert(event.button);
        }
   </script>
 

위와 같이 실행했을 경우,

마우스의 왼쪽버튼은 0번, 가운데(휠)은 1번, 오른쪽 버튼은 2번을 반환한다.

2.buttons

button 과 비슷한 이벤트이나, button 과는 달리 제한적으로만 사용할 수 있다. 

( IE 9 이상의 브라우저부터 지원하며, 크롬에서 테스트해 본 결과 브라우저 뒤로가기 버튼이나 이전으로 가기 버튼을 클릭할 경우 실행이 되지 않는다.  w3school에서는 4번째, 5번째 버튼이라 하여 일반적으로는 "브라우저 뒤로가기, 이전으로 가기" 라고 명시되어 있다.)

    <script>
        document.onmousedown= function(event){
            alert(event.buttons);
        }
   </script>
 

위와 같이 실행했을 경우,

마우스 왼쪽버튼은 1번, 가운데(휠)은 4번, 오른쪽 버튼은 2번, 브라우저 뒤로가기 버튼은 8번, 앞으로 가기 버튼은 16번을 반환한다.

3. clientX, clientY

마우스 이벤트가 발생할 때, 마우스 커서의 위치값을 반환한다. 해당값은 클라이언트 영역 혹은 브라우저 창을 기준으로 상대적인 값을 반환한다. 또한 문서가 스크롤 된 값은 고려하지 않는다.

    <script>
        document.onclick= function(event){
            console.log(event.clientX + "," + event.clientY);
        }
   </script>
 

*해당 기능을 사용할 때 screenX, screenY와는 다르다는 것을 꼭 알아야한다. 

(clientX, clientY)와 (screenX, screenY)의 다른점

(clientX, clientY)는 브라우저창 혹은 클라이언트 영역을 기준으로 상대적으로 마우스 커서의 위치값을 반환한다.

반면 (screenX, screenY)는 사용자의 화면창을 기준으로 마우스 커서의 위치값을 반환한다. 두 이벤트를 사용했을 경우 브라우저의 왼쪽 최상단 모서리를 클릭했을 경우, (clientX, clientY)는 0을 반환할 수 있지만 (screenX,screenY)에서 screenY는 브라우저의 상태표시줄을 포함한 값을 반환하기때문에 0을 반환할 수 없다.

4. detail

짧은 시간 마우스 이벤트가 몇번이나 발생했는지의 값을 반환한다. onclick, onmousedown, onmouseup 등의 이벤트에 사용할 수 있으며, IE 9 이상의 브라우저 부터 지원한다.

    <a href="#none" id="btn">클릭하세요.</a>
    <script>
        var btn = document.getElementById("btn");
        btn.onmousedown= function(event){
            console.log(event.detail);
        }
   </script>
 

5. pageX, pageY

이벤트가 발생할 경우, 마우스 커서의 위치 좌표를 반환한다. 이 프로퍼티는 비표준이며, IE기준 IE11이상부터 지원하며, 이 외의 브라우저는 사용할 수 있다. 

    <script>
        document.onmousedown= function(event){
            console.log("X값의 좌표는 " + event.pageX + ", Y값의 좌표는" + event.pageY);
        }
    </script>
 

6. relatedTarget

마우스 이벤트의 목적지 노드와 관련된 Element를 가르킨다. 이 프로퍼티는 mouseover(onmouseenter)이벤트와 mouseout(onmouseleave) 이벤트 등에서 쓸 수 있으며 다른 마우스 이벤트 등에서는 따로 정의되어 있지 않다.

아래의 소스에서 onmousedown과 onclick의 경우 null이 뜬다.

    <p id="para">This is a paragraph.</p>
    <script>
        var para = document.getElementById("para");
        para.onmousedown= function(event){
            console.log(event.relatedTarget);    //null
        }
        para.onclick= function(event){
            console.log(event.relatedTarget);    //null
        }
        para.onmouseenter= function(event){
            console.log(event.relatedTarget.tagName);
        }
        para.onmouseleave= function(event){
            console.log(event.relatedTarget);
        }
    </script>
 

7. which

button 과 동일한 효과로 이벤트 발생시 해당 이벤트를 실행시킨 마우스 버튼 값을 반환한다. button과 동일하게 IE9부터 사용 가능하며, 반환값 역시 동일하게 마우스의 왼쪽버튼은 0번, 가운데(휠)은 1번, 오른쪽 버튼은 2번을 반환한다.

    <script>
        document.onmousedown= function(event){
            console.log(event.which);
        }
    </script>