jQuery : 이벤트 연결

이벤트는 어떤 일이 발생했다는 것을 알리는 비동기적 알림입니다. 이벤트는 사용자 인터페이스, 외부I/O, 또는 프로그램의 다른 부분에서 일어날 수 있습니다. 이벤트는 웹에서도 많이 발생합니다. 예전에는 JavaScript를 통해 많은 이벤트를 연결하고 처리하였습니다. 하지만 최근에 들어와서 jQuery 라이브러리를 통해 개발자가 손쉽게 이벤트를 연결하고 처리합니다. 그래서 이번 글에서는 jQuery를 사용하여 어떻게 이벤트를 연결하고 처리하는지 그리고 모든 이벤트 핸들러가 가지고 있는 이벤트 객체에 대해서도 알아봅니다.

1. 이벤트 연결

이벤트 연결 함수 종류

bind() : 현재 존재하는 문서 객체에만 이벤트를 연결합니다.
delegate() : 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결합니다.
live() : 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결합니다.
one() : 한 번만 이벤트에 연결합니다.

bind 함수를 사용한 이벤트 연결

$(selector).bind(eventName, function(event){ })

bind 함수를 사용하면 엘리먼트에 이벤트를 쉽게 연결할 수 있습니다. bind 함수는 첫 번째 인자로 이벤트 이름과 두 번째 인자로 이벤트 핸들러를 지정하면 됩니다. bind 함수는 개체와 이벤트를 묶어주는 역할을 합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
<script type="text/javascript">
    
    $(document).ready(function () {
        $("h1").bind("click", function(){
            alert("클릭 이벤트 발생");
        });
    });
          
</script>
</head>
 
<body>
    
    <h1>이벤트 bind...</h1>
 
</body>
</html>

위 소스 10 줄을 보시면 bind 함수의 첫 번째 인자로 click과 두 번째 인자로 이벤트 핸들러 함수를 지정하여 h1 엘리먼트를 클릭 시 alert 창을 띄우는 간단한 예제입니다.

위 그림 1 '이벤트 bind...' 글씨를 클릭하면 이벤트가 발생하는 것을 확인할 수 있습니다. bind 함수를 사용하지 않고도 엘리먼트의 클릭 이벤트를 발생할 수 있습니다. event 함수인 click 함수를 바로 호출하면 똑같은 결과를 볼 수 있습니다.

$("h1").click(function(){
            alert("클릭 이벤트 발생");
        });

두 함수의 차이점이 보이시나요?? bind 함수는 click 함수를 바로 호출하는 것이 아니라 이벤트 이름을 인자로 넘겨주어 같은 효과를 볼 수 있습니다. 이러한 기능을 통해 조건에 따라 간단한 이벤트를 동적으로 할당할 수 있습니다. 또한, 여러 가지 이벤트를 선택한 개체에 손쉽게 적용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
<script type="text/javascript">
    
    var count = 0;
    $(document).ready(function () {
        $("h1").bind("mouseenter mouseleave", function(e){
            
            count++;    
            $("#result").text(count + " enter or leave ");
            
        });  
    });
          
</script>
</head>
 
<body>
    
    <h1>마우스 enter & leave event</h1>
    <div>
        이벤트 : <span id="result"></span>
    </div>
 
</body>
</html>

위 소스처럼 bind 함수 첫 번째 인자에 적용될 이벤트 이름을 한 번에 다 입력하여 복수의 이벤트를 선택한 엘리먼트에 연결할 수 있습니다.

위 그림 2를 보시면 마우스 enter & leave event 영역에 마우스를 올려놓거나 떠나면 이벤트가 발생하는 것을 볼 수 있습니다. 이번에는 복수의 이벤트를 지정한 후 각각 다른 행동을 취하고 싶다면 아래와 같이 구현하면 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
<script type="text/javascript">
    
    var count = 0;
    $(document).ready(function () {
        $("h1").bind("mouseenter mouseleave", function(e){
            count++;  
            if(e.type == "mouseenter"){
                $("#result").text(count + " enter");
            }else if(e.type == "mouseleave"){
                $("#result").text(count + " leave ");
            }            
        });  
    });
          
</script>
</head>
 
<body>
    
    <h1>마우스 enter & leave event</h1>
    <div>
        이벤트 : <span id="result"></span>
    </div>
 
</body>
</html>

모든 이벤트 핸들러는 이벤트 객체를 갖습니다. 그래서 이벤트 핸들러 함수의 인자를 사용하여 이벤트 객체를 받습니다. 이벤트 객체 type 프로퍼티로 발생한 이벤트가 어떤 이벤트인지 체크하여 각각 다른 행동을 취할 수 있습니다. 이 방법 말고도 bind 함수 인자를 통해서도 각각 다른 행동을 취할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
<script type="text/javascript">
    
    var count = 0;
    $(document).ready(function () {
        $("h1").bind({
            mouseenter : function(){
                    count++;  
                    $("#result").text(count + " enter");
                },
            mouseleave : function(){
                    count++;  
                    $("#result").text(count + " leave ");
                }            
        });  
    });
          
</script>
</head>
 
<body>
    
    <h1>마우스 enter & leave event</h1>
    <div>
        이벤트 : <span id="result"></span>
    </div>
 
</body>
</html>

bind 함수에 제이슨 형태로 이벤트 이름과 이벤트 핸들러 함수를 지정하여 넘겨주는 방식입니다. 어느 방법이 좋다고 말할 수 없으며, 상황에 맞게 사용하시면 될 거 같습니다.

위 두 가지 방법으로 실행한 결과는 같으면 각각의 이벤트에 따른 다른 행동을 취하는 것을 확인할 수 있습니다.

2. 이벤트 연결 해제

이벤트 연결 해제 함수 종류

unbind() : bind()를 통해 연결한 이벤트를 제거합니다.
die() : live()를 통해 연결한 이벤트를 제거합니다.
undelegate() : delegate()를 통해 연결한 이벤트를 제거합니다.

unbind 함수를 사용한 이벤트 연결 해제

$(selector).unbind() : 해당 문서 객체와 관련된 모든 이벤트를 제거합니다.

$(selector).unbind(eventName) : 해당 문서 객체의 특정 이벤트를 제거합니다.

$(selector).unbind(eventName, function) : 특정 이벤트 핸들러를 제거합니다.

bind()와 unbind()를 같이 사용하면 쉽게 이벤트를 한번만 실행하는 프로그램을 작성할 수 있습니다.

<!DOCTYPE html>
<html>
 <head>
 <title></title>
</style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
     $(document).ready(function () {
        $("h1").bind("click", function(e){
           $(this).text("CLICK");
            alert("이벤트가 발생했습니다.")
            
            $(this).unbind();
        });
        
     });
 </script>
 </head>
 <body>
     <h1>unbind 이벤트...</h1>
 </body>
</html>

위 소스는 bind()를 통해 click 이벤트가 발생하면 alert 창을 띄웁니다. 그리고 unbind()를 통해 연결한 이벤트를 해제합니다.

실행결과 이벤트가 한 번씩만 실행하는 것을 확인할 수 있습니다. 연결한 이벤트를 해제하여야 할 경우 unbind()를 사용하면 됩니다.

3. 이벤트 객체

이벤트 핸들러 함수는 jQuery에서 콜백될 때 이벤트 객체가 함수의 인자로 전달됩니다. 이벤트 핸들러에서는 이벤트 객체의 멤버를 사용할 수 있습니다. 대표적으로 사용하는 것은 아래와 같습니다.

type : 이벤트 종류
pageX : 브라우저 화면을 기준으로 한 마우스 X 좌표 위치
pageY : 브라우저 화면을 기준으로 한 마우스 Y 좌표 위치
preventDefault() : 기본 이벤트를 제거합니다.
stopPropagation() : 이벤트 전달을 제거합니다.

조금 더 자세한 정보를 원하시면 아래 링크를 참조하세요.

http://api.jquery.com/category/events/event-object/

a 태그를 예제를 통해 preventDefault()와 stopPropagation()를 조금 더 알아보도록 하겠습니다.

<!DOCTYPE html>
<html>
 <head>
 <title></title>
<style>
     *{
         margin : 5px; padding : 5px;
         border : 3px; solid Black;
     }
</style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>    
     $(document).ready(function () {
        $("a").bind("click", function(e){
            $(this).css('color', 'green');
            
            e.preventDefault();
            
        });
        
         $("h1").bind("click", function(e){
            $(this).css('background-color', 'Red');         
        });
         
     });
 </script>
 </head>
 <body>
     <h1>
        <a href = "http://www.naver.com">네이버</a>
     </h1>
 </body>
</html>

위 소스는 a 태그를 클릭하면 기본적으로는 href의 속성의 주소로 페이지를 이동하는 이벤트가 발생합니다. 하지만 위 소스는 a 태그를 클릭했을 때 이벤트 객체의 preventDefault()를 사용하여 a 태그의 기본 이벤트를 제거하였습니다. 그래서 페이지 이동이 일어나지 않고 글자색이 녹색으로 바뀌는 것을 볼 수 있습니다.

하지만 a 태그를 감싸고 있는 h1 태그에까지 이벤트가 전달되어 배경이 빨간색으로 바뀌는 것을 볼 수 있습니다.

 $("a").bind("click", function(e){
            $(this).css('color', 'green');
            
            e.preventDefault();
            e.stopPropagation();
            
        });

위 소스는 이벤트 객체의 stopPropagation()를 사용하여 h1 태그에 이벤트가 전달되는 것을 막을 수 있습니다. 똑같이 실행시키면 h1 태그 부분에 배경이 바뀌지 않는 것을 볼 수 있습니다.

이벤트 객체의 preventDefault()와 stopPropagation()는 함께 사용하는 경우가 많으므로 jQuery에서는 아래 소스와 같이 간단 하게 처리할 수 있습니다.

$("a").bind("click", function(e){
            $(this).css('color', 'green');
            
           return false;
            
        });

preventDefault()와 stopPropagation() 대신 return false를 사용하면 두 가지를 함께 적용하는 것으로 인식합니다.

4. 마치며

간단하게 jQuery를 사용해서 이벤트 연결, 해제 그리고 이벤트 객체에 대해 알아보았습니다. 이벤트 연결과 처리 방법 그리고 언제 연결해야 하는지 잘 이해 하신다면 이벤트를 이해하시는 것에는 큰 무리가 없을 거 같습니다. jQuery를 통한 이벤트에 대한 깊은 내용은 아니지만, 이제 막 jQuery를 통해 이벤트를 어떻게 처리해야 하는지 궁금하신 분들께 조금이나 도움이 되었으면 하는 바람입니다.

감사합니다.

참고 도서 및 사이트

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