'jQuery Event' 태그의 글 목록

Search

'jQuery Event'에 해당되는 글 2건

[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~ by 승연아빠님

프로그램&DB/JQUERY 2011. 8. 9. 00:01 Posted by Josep.H.S

“Add Element”를 통해 요소를 동적으로 추가하고 해당 요소를 클릭시에 이전과 동일하게 동작을 하나 “Event Die” 버튼을 클릭하시면 더 이상 경고 창이 뜨지 않는 것을 확인 할 수 있습니다.

$(‘li’).die() 의 경우는 요소 “<li>”과 연결된 모든 이벤트를 삭제를 하며, $(‘li’).die(‘click’);이라고 지정할 경우에는 “<li>”요소와 연결된 ‘click’ 이벤트만을 삭제 합니다. 너무나 간단하게 이벤트를 추가하고, 삭제할 수 있다니 그것도 동적으로 생성되는 요소에 정말 완소 아이템 아니 메서드가 아닌가 싶습니다.

바로 이어서 마지막으로 설명드릴 메서드는 더욱더 뽠따스틱한 기능을 하는 .one() 입니다.

이름에서 뭔가 느껴지지 않으시나요 ? (jQuery를 사용하다 보면 정말 메서드 이름만으로 대략의 기능을 알아 차릴 수 있습니다.)

.bind() 메서드와 동일한 방식으로 이벤트를 추가합니다. 하지만 .one() 메서드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라지게 됩니다. 정말 이런 것이 jQuery에서 제공하는 메서드의 호출만으로 적용 할 수 있다니~ 정말 세상 좋아졌습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('li').one('click', function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>
</body>
</html>

바로 앞에 진행한 예제와 기본 동작은 동일합니다. “<li>” 요소를 클릭하면 해당 내용을 경고 창을 통해서 보여줍니다. 설명을 드린 내용과 동일하게 동작을 하는지 확인을 해 보도록 하겠습니다.

역시 이미지로는 동작하는 모습을 보여드리기가 힘드네요…. 정말로 설명한 데로 동작을 하니 꼭 소스를 실행해 보시기 바랍니다. (뻥치는거 절대 아닙니다. 그래도 의심이 가신다면 혹은 예제 실행이 귀찮으시다면 http://api.jquery.com/one/ 를 확인을 부탁 드립니다.)

이번 시간에는 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/394534

감사합니다.

승연아빠(io2tree@live.com)

HoonsNET ASP.NET Sysop

ASP.NET MVP

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

[jQuery] radio , select 에서 value 값 가져오기 (0)	2011.08.29
[jQuery강좌] 20. jQuery Performance by 승연아빠님 (0)	2011.08.09
[jQuery강좌] 18. jQuery Event - bind() 메서드 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강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님

프로그램&DB/JQUERY 2011. 8. 9. 00:00 Posted by Josep.H.S

웹 프런티어와 함께하는 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 시리즈 동영상 강좌 리스트

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

감사합니다.

승연아빠(io2tree@live.com)

HoonsNET ASP.NET Sysop

ASP.NET MVP

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

[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

«이전 1 다음»

NewsTwit

카테고리

Search

'jQuery Event'에 해당되는 글 2건

[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~ by 승연아빠님

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

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

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

tag cloud

공지사항

최근댓글

최근기사

글보관함

링크

티스토리툴바

« 2025/7 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31