Languages/Java Script

[Js] 마우스 | jQuery 이벤트 | on ApI 사용법

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

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#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

마우스

이벤트 타입

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

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

실행 결과

jQuery 이벤트

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다. (실행)

<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jQuery" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    // 순수하게 구현했을 때
    var target = document.getElementById('pure');
    if(target.addEventListener){
        target.addEventListener('click', function(event){
            alert('pure');
        });
    } else {
        target.attachEvent('onclick', function(event){
            alert('pure');
        });
    }
 
    // jQuery를 사용했을 때
    $('#jquery').on('click', function(event){
        alert('jQuery');
    })
</script>

코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다.

이런 이유 때문에 jQuery와 같은 라이브러리를 사용하는 것이다.

on API 사용법

기본 사용법

on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자.

on의 기본적인 문법은 아래와 같다.

.on( events [, selector ] [, data ], handler(eventObject) )

event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
handler : 이벤트 핸들러 함수

[]로 괄호가 쳐져있는 것들은 생략이 가능하다.

selector(:생략 가능)

selector 파라미터는 이벤트 대상을 필터링한다. 아래 예제를 보자.

<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('ul').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>

ul엘리먼트의 이벤트를 달았지만, a, li 클릭 시 click이벤트 핸들러를 설치 한 것처럼 동작한다.

실행결과

A
LI

위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에 a, li 엘리먼트들에 대해서만 이벤트가 발생한다. 주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다.

이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.

셀렉터는 중요한 하나의 기능을 가지고 있는데, 그것이 바로 늦은 연결 "late binding"이라는 기능이다.

late binding

jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 놀라운 기능을 제공한다. 아래 코드를 보자.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('ul').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

위의 코드는 실행되지 않는다. ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문이다.

존재하지 않는 엘리먼트에 이벤트를 달 수 없다는 것은 이미 배운 바가 있다. 그런데 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('body').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

즉, 아직 알지 못하는 ul태그가 아닌, 존재 하고 있는 것이 확인 된, body 태그를 실행 시키므로써 나중에 추가되는 엘리먼트의 대한 이벤트를 사용할 수 있는 것이다.

(예전에는 live로 사용했었으나 이젠 안됨)

다중 바인딩

하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법을 알아보자. (실행)

<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target').on('focus blur', function(e){
        $('#status').html(e.type);
    })
</script>

focus와 blur사이에 공백을 통해 두가지의 이벤트 타입을 동시에 등록하였다.

한번에 여러개의 이벤트 타입을 선택했다. 만약 이벤트에 따라서 다른 핸들러를 실행하고 싶다면 아래와 같이 코드를 변경한다.

<input type="text" id="target" />
<p id="status"></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
    $('#target').on({
        'focus' : function(e){
 
        }, 
        'blur' : function(e){
             
        }
    })
</script>

이벤트 제거

이벤트를 제거할 때는 off를 사용한다.

<input type="text" id="target"></textarea>
<input id="remove"  type="button" value="remove" />
<p id="status"></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
  var handler = function(e){
    $('#status').text(e.type+Math.random());
  };
  $('#target').on('focus blur', handler)
  $('#remove').on('click' , function(e){
    $('#target').off('focus blur', handler);
    console.log(32);
  })
</script>

<input type="text" id="target"></textarea>
<input id="remove"  type="button" value="remove" />
<p id="status"></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
  var handler = function(e){
    $('#status').text(e.type+Math.random());
  };
  $('#target').on('focus blur', handler)
  $('#target').on('focus' , function(e){
  	alert('test');
  });
    $('#remove').on('click', function(e){
    	$('#target').off('focus blur');
  })
</script>

즉, remove를 클릭해서 이벤트를 제거하는 것이다.

'Languages > Java Script' 카테고리의 다른 글

[Js] JSON \| Ajax와 JSON (0)	2021.02.10
[Js]네트워크 통신 \| Ajax (0)	2021.02.10
👉🏻[Js] 기본동작의 취소 \| 폼 \| 문서로딩 (0)	2021.02.10
👉🏻[Js] addEventListener() \| 이벤트 전파 \| 버블링과 캡처링 (0)	2021.02.10

Contents

새소식

인기 검색어