[jQuery강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님

웹 프런티어와 함께하는 jQuery 기초강좌

18th - jQuery Event - bind() 메서드를 통한 이벤트 연결

이번 시간에는 jQuery에서 지원하는 이벤트를 좀더 고급스럽게 사용하는 방법에 대해 알아 보도록 하겠습니다.(고급이라고 해 봤자, 표현식이 좀 뭔가 있어 보이는 거 정도일까요 ?)

이번 강좌에서는 고급스런 내용의 첫 번째 주자로 나선 bind() 메서드에 대하여 알~ 차게 이야기를 해 보도록 하겠습니다.

.bind()

.bind() 메서드는 말 그대로 개체와 이벤트를 묶어주는 역할을 합니다.

앞에서 진행한 event 관련 메서드의 경우 해당 메서드를 직접 호출하지만, bind()의 경우 파라미터의 값으로 이벤트 이름을 넣음 으로써 해당 이벤트를 체크하게 됩니다.

$(“div”).click(function() { alert('click’); }

$(“div”).click(function() { alert(‘click’); }
event 메서드에서 이렇게 사용했다면, bind() 메서드를 통해서는 다음과 같이 표현 됩니다.

$(“div”).bind(??click’, function() { alert('bind click’); }

$(“div”).bind(‘click’, function() { alert(‘bind click’); }

두 메서드의 차이점이 보이시나요 ?

.click() 메서드의 직접호출이 아닌 해당 이벤트의 이름을 넘김으로 써 동일한 효과를 얻을 수 있습니다.

이러한 기능을 통해 조건에 따라 매우 간단히 이벤트를 동적으로 할당 할 수 있습니다. 또한, 여러 가지의 이벤트를 손쉽게 선택한 개체에 적용할 수 있습니다. 두 개의 이벤트를 적용한 다음 예제를 통해 좀더 자세히 알아 보도록 하겠습니다.

이번 예제는 마우스의 포인터가 지정한 요소에 들어 왔을 때와, 나갔을 때의 이벤트를 체크하여 상태를 표시하며, bind()에 “mouseenter, mouseleave” 이벤트를 이용하였습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var count = 0;
        $(document).ready(function () {
            $("#mouseArea").bind("mouseenter mouseleave", function (e) {
                count++;
                $("#spResult").text(count + " enter or leave ");
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div id="mouseArea">
        AREA(DIV)
        MOUSE : <span id="spResult"></span>
    </div>
</body>
</html>

붉은색으로 표시된 부분에 마우스 포인터를 위치할 때 마다 카운터가 올라가는 것을 확인 할 수 있습니다. 이렇게 여러 개의 이벤트를 지정 시에도 문제없이 동작을 하는걸 확인 할 수 있습니다.

이번에는 이렇게 복수의 이벤트를 지정 후 각각의 이벤트에 따른 다른 동작을 구현을 하기 위해서는 어떠한 방법이 있는지 알아 보도록 하겠습니다. bind() 메서드에서 매우 중요한 부분이니 주의 깊게 보시기 바랍니다.

다음 예제에서는 bind() 메서드의 파라미터와 eventData릍 사용하여 각각의 이벤트를 어떻게 확인하고 처리하는지 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var countEnter = 0;
        var countLeave = 0;
        $(document).ready(function () {
            $("#mouseArea").bind("mouseenter mouseleave", function (e) {
                if (e.type == 'mouseenter') {
                    countEnter++;
                    $("#spResult").text(countEnter + " MouseEnter");
                }
                else {
                    countLeave++;
                    $("#spResult").text(countLeave + " MouseLeave ");
                }
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div id="mouseArea">
        AREA(DIV)
        MOUSE : <span id="spResult"></span>
    </div>
</body>
</html>

[eventData를 통한 이벤트 확인]

각각의 이벤트에 따라 값이 변경되는걸 확인 할 수 있습니다.

<script type="text/javascript">
    var countEnter = 0;
    var countLeave = 0;
    $(document).ready(function () {
        $("#mouseArea").bind({
            mouseenter : function() {
                countEnter++;
                $("#spResult").text(countEnter + " MouseEnter");
            },
            mouseleave : function() {
                countLeave++;
                $("#spResult").text(countLeave + " MouseLeave ");
            }
        });
    });
</script>

위 소스에서 스크립트 부분만 변경하였으며, eventData 대신에 각각의 이벤트에 관련 함수를 연결하여 해당 이벤트를 구분 짖고 있습니다.
역시나 동일한 동작을 하고 있는 모습을 확인 할 수 있습니다.

이번 시간에는 이벤트와 요소를 연결하고, 요소에 여러가지 이벤트를 연결하고 구분 짖는 고급(?)스러운 jQuery 표현 방식을 알아 보았습니다. 이벤트를 제어하기 위해서 필수적으로 알아야 하는 메서드 이니, 꼭 숙지 하시기를 부탁(?) 드립니다.

jQuery 시리즈 강좌 리스트

[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery강좌] 10. jQuery Traverse - Filtering
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery강좌] 12. jQuery Traverse - Tree Traversal
[jQuery강좌] 13. jQuery Core
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery강좌] 18. jQuery Event - bind() 메서드
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery강좌] 20. jQuery Performance

jQuery 시리즈 동영상 강좌 리스트

[출처] SQLER.COM [출처] SQLER.COM http://www.sqler.com/390805

감사합니다.

승연아빠(io2tree@live.com)

HoonsNET ASP.NET Sysop

ASP.NET MVP

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

[jQuery강좌] 20. jQuery Performance by 승연아빠님 (0)	2011.08.09
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~ by 승연아빠님 (0)	2011.08.09
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드 by 승연아빠님 (0)	2011.08.08
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 by 승연아빠님 (0)	2011.08.08
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여 by 승연아빠님 (0)	2011.08.08

WVC-VisionFlag

[jQuery강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

티스토리툴바

[jQuery강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

'프로그램&DB/jQuery&JS' Related Articles

티스토리툴바