power-girl0-0

[ 이벤트 타입 ] 마우스 본문

언어/Javascript

[ 이벤트 타입 ] 마우스

power-girl0-0 2021. 2. 10. 20:35
728x90

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 

 이벤트 타입 

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


  • 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>		//alt키를 누르고 있을 때
                <td id="elmaltkey"></td>
            </tr>
            <tr>
                <td>event.ctrlKey</td>		//ctrl키를 누르고 있을 때
                <td id="elmctrlkey"></td>
            </tr>
            <tr>
                <td>event.shiftKey</td>		//shift키를 누르고 있을 때
                <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>

 

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

on API 사용법  (0) 2021.02.10
jQuery 이벤트  (0) 2021.02.10
[ 이벤트 타입 ] 문서 로딩  (0) 2021.02.10
[ 이벤트 타입 ] 폼 (form)  (0) 2021.02.10
기본동작의 취소  (0) 2021.02.10
'언어/Javascript' Related Articles more
Comments