관리 메뉴

FU11M00N

[ JavaScript ] JS 마우스이벤트 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 마우스이벤트

호IT 2021. 2. 10. 04:46

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 


 

- 마우스 이벤트

 

 

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

 

 

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

 

 

 

- 키보드 조합 마우스 이벤트 

 

마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면

이벤트 객체의 프로퍼티를 사용하면 됩니다.

 

 

이 때 사용하는 프로퍼티는 아래와 같습니다.

 

 

 

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

 

 

 

 

- 마우스 이벤트(포인터 위치)

마우스 포인터의 위치가 필요할때 clinetX와 clinetY를 사용하여 알아낼수있습니다.

 

 

아래는 위에 소개한 이벤트와 관련된 기능을 종합적으로 보여주는 코드입니다.

 

 

 

 

 

 

- 전체적인 예제 코드

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

 

 

 

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

 

 

Comments