jQuery : 마우스 이벤트

이전 글(jQuery: 이벤트 연결)에서 이벤트 연결과 해제 방법, 이벤트를 발생시킨 요소(element) 정보를 가지고 있는 이벤트 객체 등을 살펴보았습니다. 이벤트를 조금 경험했으므로, 이번에는 이벤트 종류와 사용방법을 주제로 조금 더 깊게 들어가 봅니다. 이벤트 종류는 네 가지입니다.

마우스 이벤트
키보드 이벤트
윈도우 이벤트
입력양식 이벤트

1. 마우스 이벤트

마우스 움직임에 따라 발생하는 알림을 처리할 경우 마우스 이벤트로 처리합니다. 다음과 같은 마우스 이벤트가 있습니다.

click : 마우스를 클릭할 때 발생
dbclick : 마우스를 더블 클릭할 때 발생
mousedown : 마우스 버튼을 누를 때 발생
mouseup : 마우스 버튼을 뗄 때 발생
mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
mousemove : 마우스를 움직일 때 발생
mouseout : 마우스가 요소를 벗어날 때 발생
mouseover : 마우스를 요소 안에 들어올 때 발생

마우스는 이벤트에 해당하는 함수는 이름만 봐도 알 수 있습니다. 그 중에서 mouseover와 mouseenter 차이와 mouseleave와 mouseout 이벤트의 차이를 살펴봅니다.

<!DOCTYPE html>
<html>
 <head>
    <title>mouse event</title>
     <style>
        .outer{
            width:200px; height:200px; background:orange; padding:50px; margin:10px;
        }
        .inner{
            width:100%; height:100%; background:pink;
        }
     </style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
     $(document).ready(function () {
        $(".outer").mouseover(function(){
            $('body').append("<h6>MOUSEOVER<h6>");
        }).mouseenter(function(){
             $('body').append("<h6>MOUSEENTER<h6>");
        });
        
     });
 </script>
 </head>
 <body>
     <div class="outer">
        <div class="inner"></div>
     </div>
 </body>
</html>

위 소스는 큰 박스와 작은 박스에 각각 마우스를 차례로 올려놓았을 경우 mouseover와 mouseenter의 차이를 보여주는 예제입니다. 소스에서 큰 박스에 mouseover와 mouseenter 이벤트를 설정하였습니다. 그리고 마우스를 큰 박스와 작은 박스에 차례로 올려놓으면 mouseover 이벤트는 두 번 발생합니다. 큰 박스에서 한 번, 작은 박스에서 한 번, 모두 두 번 발생합니다. 이벤트 버블링을 적용하기 때문입니다. 반면 mouseenter 이벤트는 한 번밖에 적용되지 않습니다. 이벤트 버블링을 막고자 한다면 mouseover 보다는 mouseenter를 사용합니다.

위 그림 1을 보면 mouseover는 두 번 발생하고 mouseenter는 한 번 발생함을 알 수 있습니다. mouseout과 mouselevave도 버블링을 적용하는 차이입니다. mouseout는 이벤트 버블링을 적용하는 반면 mouseleave는 적용하지 않습니다.

2. 키보드 이벤트

사용자 키보드 입력에 따라 발생하는 알림은 키보드 이벤트로 처리합니다. 키보드 이벤트는 세 가지입니다.

keydown : 키를 누를 때 발생
keypress : 글자를 입력할 때 발생
keyup : 키로부터 손가락을 뗄 때 발생

동적으로 글자 수를 세어주는 예제로 키보드 이벤트를 살펴봅니다. "글자 세기" 예제를 만들 때 keypress 이벤트를 사용합니다. 하지만 keypress 이벤트는 한글입력에 사용할 수 없습니다. 한글 입력에는 keyup 이벤트를 사용합니다.

<!DOCTYPE html>
<html>
 <head>
    <title>keyboard event</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
     $(document).ready(function () {
        $("textarea").keyup(function(){
            var inputLengeth = $(this).val().length;
            
            $('h1').html("입력된 글자 수 : " + inputLengeth);
        });
        
     });
 </script>
 </head>
 <body>
     <div>
         <h1>입력된 글자 수 : </h1>
         <textarea cols="70" row="5"></textarea>
     </div>
 </body>
</html>

이 예제는 keyup 이벤트가 생길 때마다 글자를 세어 줍니다. 글자를 입력할 때 keydown 이벤트가 아닌 keyup 이벤트를 사용하는 이유는 무엇일까요? 키보드 이벤트가 발생하는 순서에 그 답이 있습니다. 키보드 이벤트 발생 순서는 다음과 같습니다.

사용자가 키보드를 누른다.
keydown 이벤트가 발생한다.
글자가 입력된다.
keypress 이벤트가 발생한다.
사용자가 키보드에서 손을 뗀다.
keyup 이벤트가 발생한다.

이런 순서 때문에 keydown 이벤트 발생 후 아직 글자는 입력되지 않은 상태입니다. 그래서 입력한 글자 수를 표시해야 하므로 글자가 입력되고 난 다음인 keyup 이벤트를 사용해야 합니다.

그림 2를 보면 글자가 입력될 때마다 동적으로 글자를 세는 것을 알 수 있습니다.

3. 윈도우 이벤트

윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라, 윈도우 객체와 document 객체 이외에 img 태그 등이 사용하는 이벤트입니다. 윈도우 이벤트는 여섯 가지입니다.

read : 문서 객체가 준비되었을 때 발생
load : 윈도우를 불러들일 때 발생
unload : 윈도우를 닫을 때 발생
resize : 윈도우의 크기를 바뀔 때 발생
scroll : 윈도우를 스크롤할 때 발생
error : 에러가 있을 때 발생

SNS에서 자주 볼 수 있는 무한 스크롤 기능을 예로 들어, 윈도우 이벤트를 살펴봅니다. 무한 스크롤은 페이지가 끝까지 내려갔을 때 또 다른 리스트를 로딩시켜 사용자에게 계속해서 페이지의 내용을 보여주는 방법입니다.

<!DOCTYPE html>
<html>
 <head>
    <title>scroll page</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
        $(document).ready(function () {
            
            for(var i = 0; i < 20; i++){
                $("<h1>Scroll</h1>").appendTo("body");
            }   
            
            $(window).scroll(function(){
                
                var scrollHeight = $(window).scrollTop() + $(window).height();
                var documentHeight = $(document).height();

                if(scrollHeight + 200 >= documentHeight){
                    for(var i = 0; i < 10; i++){
                        $("<h1>Infinity Scroll</h1>").appendTo("body");
                    }
                }
            });
     });
 </script>
 </head>
 <body>
    
 </body>
</html>

위 소스는 scroll이 끝까지 내려가면 다시 10줄을 추가하는 방식으로 무한 스크롤을 합니다. document 객체의 height 속성은 문서 전체의 높이를 의미합니다. 스크롤이 끝까지 내려가면 window 객체의 scrollTop 속성과 height 속성을 합한 값이 document 객체의 높이와 같아집니다. 이를 이용하여 스크롤이 페이지의 끝까지 도달했다는 사실을 알 수 있습니다. 그리고 scroll이 끝까지 도달하여 개발자가 원하는 작업을 수행하면 됩니다. 위 소스 결과는 소스를 직접 돌려보고 눈으로 확인하는 것이 더 좋으므로 생략하도록 하겠습니다.

4. 입력 양식 이벤트

입력 양식에서 발생하는 알림을 처리할 경우 입력 양식 이벤트를 사용합니다. 입력 양식 이벤트는 여섯 가지입니다.

change : 입력 양식의 내용을 변경할 때 발생
focus : 입력 양식에 초점을 맞추면 발생
focusin : 입력 양식에 초점이 맞춰지기 바로 전에 발생
blur : 입력 양식에 초점이 사라질 때 발생
select : 입력 양식을 선택할 때 발생 (type이 text, textarea 제외)
submit : submit 버튼을 누를 때 발생

checkbox와 radio인 input 태그의 상태를 변경하는 예제를 change 이벤트를 통해 알아보도록 하겠습니다.

<!DOCTYPE html>
<html>
 <head>
    <title>input event</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
     $(document).ready(function () {
        $("#all_check").change(function(){
            if(this.checked){
                $("#check_item").children().prop('checked', true);
            }else{
                $("#check_item").children().prop('checked', false);
            }
        });
     });
 </script>
 </head>
 <body>
    <input type="checkbox" id="all_check"/>
     <label>All</label>
     
     <div id="check_item">
        <input type="checkbox"/>
        <label>A Option</label>
        <input type="checkbox"/>
        <label>B Option</label>
        <input type="checkbox"/>
        <label>c Option</label>
        <input type="checkbox"/>
        <label>d Option</label>
     </div>
 </body>
</html>

change 이벤트를 통해 All 체크 박스를 선택하거나 해제하였을 때 change 이벤트가 발생합니다. 그리고 change 함수가 실행되면 아래 체크박스들이 체크 되어있으면 해제하고, 체크되어 있지 않으면 다시 체크하는 예제입니다.

소스를 실행하시면 그림 3과 같이 확인할 수 있습니다.

5. 마치며

이번 글에서는 이벤트 사용법을 살펴보았습니다. 이벤트 사용 방법은 생각보다 어렵지 않고, 이벤트의 동작방식에 대한 기본 이해만 있다면 쉽게 사용할 수 있습니다. 이벤트 사용 방법에 대해 궁금하신 분들께 많은 도움이 되었으면 하는 바램입니다. 참고로 다른 글에서 live 함수를 살펴보았는데 live 함수는 jQuery 1.7 버전부터는 없어졌습니다. 그 대신 on()을 사용하여 해당 기능을 구현할 수 있습니다. 감사합니다.

참고 도서 및 사이트

윤인성 저, 모던 웹을 위한 JavaScript jQuery 입문
베어 바이볼트&예후다 저, jQuery in Action
웹 문서- http://api.jquery.com/category/events/