login register Sysop! about ME  
qrcode
    최초 작성일 :    2009년 10월 12일
  최종 수정일 :    2009년 10월 12일
  작성자 :    Taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    87,356

강좌 목록으로 돌아가기

필자의 잡담~

기다시리던 jQuery 이벤트 강좌입니다. 히힛

그건 그렇고, ASP.NET MVC 이제 곧 판매를 개시하네요.
광고하냐고요? 네~~~ 그런 겁니다요~~ 잇힝. 공지사항 참조해 주세연~

드디어, 이벤트를 다루는 강좌까지 왔습니다. 이러다가 jQuery 전체 내용을 강좌로 다 쓰겠네요. 흠! 뭐 그것도 나쁘지는 않겠죠!

일단, 여기서 말하는 이벤트라는 것은 여친과의 100일 기념 이벤트라던가, 결혼 기념일 이벤트라던가, 생일빵 이벤트라던가 하는 이벤트가 아니라는 사실은 다들 알고 계실 것이기에 “이벤트”라는 단어를 가지고 괜한 개그를 시도한다거나 하지는 않도록 하겠습니다(역시, 난 소심해 유유).

그렇습니다. 웹 프로그래밍에서의 이벤트란 사용자의 어떤 액션(개체를 클릭하거나, 마우스를 움직이는 행동)에 의해서 야기되는 사건을 의미하며, 그러한 이벤트에는 클릭, 마우스 오버, 키 입력 등이 있습니다. 그리고, 일반적으로 그러한 이벤트가 발생하는 경우 특정 로직을 수행하기 위해서 해당 이벤트와 특정 메서드를 연결해 놓곤 하는데요. 이러한 연결을 이벤트 처리기 매핑(event hanlder mapping)이라고 이야기하며, 매핑에 의해서 연결된 메서드들을 이벤트 처리기라고 합니다. Click, MouseOver, KeyPress 등등을 알고 계시죠? 그렇습니다. 이들이 이벤트 처리기들입니다.

예를 들면, 여러분은 자바스크립트를 사용해서 다음과 같이 이벤트 처리기를 매핑할 수 있습니다.

Window.onload = pageLoad;

이 코드에서 이벤트는 onload 이고요(관례적으로, 이벤트명 앞에는 on을 써서 표기하곤 합니다). 이벤트 처리기는 pageLoad 입니다. 그리고, 그 둘을 연결하는 위의 코드를 이벤트 처리기 매핑 코드라고 부릅니다. 즉, load 이벤트가 발생하는 경우에는 pageLoad라는 이벤트 처리기를 실행하라는 의미이죠. 코딩 좀 하는 분들은 이벤트 처리기(event handler)를 이벤트 핸들뤄~라고 원어 그대로 부르기도 합니다만, 어떻게 부르던 이해할 수만 있으면 됩니다(이렇게 말하고나니, 왠지 이벤트 핸들러라고 더 많이 부르는 듯한 느낌이…).

뭐. 다 아시는 이야기를 했는데요. 사실 이벤트라는 놈을 사용하는 것 자체는 하나도 복잡할 것이 없으며, 어려움없이 쉽게 사용할 수 있지만, 이벤트의 내부 동작방식을 이해하는 것은 살짝 어렵게 느껴질 수 있습니다. 만일, 여러분이 기존에 VB나 C#으로 사용자 정의 이벤트 작성을 해봤다면 델리게이트 및 이벤트와 관련하여 다소 헛갈리는 피곤함을 느껴보신 경험들이 있으실 겁니다(책을 막 찾아보면서 어떻게든 이해하려고 애를 쓰곤 하죠). 여러분이 머리가 나빠서 이해가 잘 안되는게 아니고요. 첨에는 누구나 다 난해하게 느낍니다(아! 여러분은 한 개도 안 난해했다고요? 조나단 쉬웠다고요? 그럼, 저만 어려웠었나보네요!!! 흥!!).

여하튼, 이벤트란 놈은 그런 놈인데요. 지금부터 이야기할 jQuery의 이벤트 관련 기능들은 대부분 이벤트 매핑을 쉽게 하는 방법에 대한 이야기입니다. 뭐 원래도 이벤트 매핑은 쉬운 편인데, jQuery가 뭐 대단한 기능을 제공해 줄만한 게 있나?라고 생각했다가는 올 겨울에 썰매 좀 끌게 되실 겁니다(큰 코가 다쳐서 루돌프 코가 된다는 말 개그입니다).

기본적인 자바스크립트 이벤트 매핑 방식(위에서 보여드린 Window.onload = pageLoad;과 같은 것)도 나름대로 깔끔한 편이라 사용하기에 그리 큰 불편함은 없습니다만, 페이지의 구성이 복잡해지게 되면 사용상의 제약이나 코딩 상의 불편함이 생겨나곤 합니다. 예를 들어, 버튼 개체에 동일한 이벤트를 여러 번 추가해야 하는 경우를 생각해 봅시다. 즉, 페이지에 상단에서 button.onclick = button_click;와 같이 이벤트 매핑을 해 두었는데, 페이지의 하단에서 button.onclick = btn_click;와 같이 동일 이벤트에 대해 또 다른 이벤트 처리기를 덧붙여야 한다면 어떻게 해야 할까요?

그럴 일이 왜 있어! 말두 안돼! 그리고, 그런 일이 생기면 설계가 잘못된거야! 걍 코드를 전부 button_click() 함수 안에 다 넣었어야지! 라고 말씀하실 수 있습니다. 네네~ 물론, 일반적인 경우라면 그렇게 하면 됩니다. 하지만, 동적으로 페이지를 꾸미는 경우에는 그렇게 하기가 어려운 경우도 있습니다. 예를 들면, 마스터 페이지에서 클릭 이벤트를 매핑하고, 콘텐트 페이지에서도 이벤트 처리기를 다시금 매핑해야 하는 경우도 생각보다 자주 있을 수 있기 때문입니다(Load 이벤트의 경우는 꽤 자주 이러한 처리가 필요합니다).

또한, 어떤 개체에 동적으로 이벤트 처리기를 매핑해야 하는 경우도 있을 수 있습니다. 다만, 동적으로 이벤트를 매핑한다고 해서 기존 매핑을 뒤집어 써서는 안되겠죠.

이러한 다중 처리기 매핑의 경우는 기본 자바스크립트 매핑만으로는 설정하기가 다소 까다롭습니다. 심지어는 동일 이벤트에 대한 다중 매핑이 아예 불가능하다고 아시는 분들도 계시는데, 사실 불가능하진 않습니다. 이에 대해서는 유경상 수석의 " 스크립트 가지고 놀기 (Java Script Tip : Interception)" 강좌를 한번 참고해 보시기 바랍니다. 하단의 예제에서 이러한 부분을 다루고 있습니다(호오~ 유물탱~ 역시 박식하심!).

그리고, 자바스크립트 기본 매핑 방식으로 설정하기가 좀 짜증이 나는 또 다른 예로는 “일회성 이벤트 매핑”을 들 수 있습니다. 일회성 이벤트 매핑이란 것은 특정 이벤트가 한번만 동작하고 그 이후로는 동작되지 않는 것을 말합니다. 예를 들면, 버튼이 처음 클릭되는 경우에는 처리기 메서드가 호출되지만 그 이후로는 클릭해도 메서드가 동작하지 않게 처리하는 것이죠. 기본 스크립트로 이러한 처리를 하려면, 버튼 클릭 이벤트 처리기 내부에서 이벤트 매핑을 제거하는 코드를 넣어야 하는데요. 사실, 이런 식으로 코딩하는 것은 뭔가 깔끔하지 않은 프로그래밍처럼 느껴지곤 합니다. 이벤트 매핑의 주체가 이벤트 처리기 자신이다보니 일종의 무한반복 호출 코드처럼 비춰질 수 있기 때문이죠.

이 외에도, 자바스크립트 기본 매핑을 사용할 경우 작업하기가 약간 복잡한 다양한 사례들이 존재합니다. 비록 작업이 불가능하지는 않지만, 뭔가 개발이 복잡해지고, 지저분해지며, 관리하기에도 난해해지게 된다는 것이죠. 그렇기에, jQuery는 이벤트와 관련한 코드를 간결하게 작성할 수 있도록 돕는 다양한 기능 또한 제공하고 있습니다.

그리고, 그것이 이번 강좌의 주제이지요! (기승전결의 기를 너무 오래 끌었네요. 아~ 기가 빠지네요). 그렇다면, 봅시다. jQuery의 이벤트 지원 메서드들을!!!!!

jQuery가 제공하는 이벤트 관련 메서드들

bind( type, data, fn ) 매치된 요소에 이벤트 처리기를 바인딩한다. type에는 이벤트 명칭을, data에는 부가적으로 전달할 데이터 개체(Json)를, fn 에는 이벤트 처리기 함수를 작성하면 된다.
unbind( type, fn ) 매치된 요소에서 지정된 이벤트와 매핑된 모든 처리기들을 제거한다. bind 메서드와 상반되는 메서드이다
one( type, data, fn ) 매치된 요소에 오직 한번만 실행되는 이벤트 처리기를 바인딩한다
trigger( event, data ) 매치된 요소의 특정 이벤트를 트리거한다.

일관성을 중요시하는 jQuery 답게 역시나 메서드도 일관성이 있습니다. 사용하는 방법은 매우 간단합니다. 특정 개체에게 이벤트 매핑이 필요하다면 bind 메서드를 사용해서 해당 이벤트와 처리기를 등록하면 되고요. 이벤트 매핑을 제거하고 싶다면, unbind를 사용해서 매핑을 제거할 이벤트를 지정하면 됩니다.

예를 들면, 다음의 코드는 MyBtn 이라는 아이디를 갖는 버튼에게 클릭 이벤트 처리기를 매핑하는 예입니다.

$("#MyBtn").bind("click"function() {
   
alert("누가 내 버튼을 클릭한 것이냐?");
});

아! 물론, 이벤트 처리기를 익명 함수 대신 별도의 함수로 떼어내서 작성하는 것도 가능합니다만, 일반적으로 jQuery에서는 익명 함수를 사용하곤 하죠. 사실, 실제로도 별도 함수로 분리하여 사용할 일은 적은 편입니다. 별도 함수로 작성하는 것은 대부분 재사용을 위해서인데, 이벤트 처리기는 재사용할 일이 거의 없기 때문이죠.

자. 이쯤 되면 물어오는 질문이 있습니다. 그렇습니다. 바로 첫 번째 인자로 사용하는 이벤트 명에는 어떤 것들이 있느냐는 것이 그것입니다. 하하하. 왜 안 물어보시나 했네요~ 그러면, 그러한 이벤트들을 정리해서 보여드리겠습니다. 짜잔!

사용 가능한 이벤트 명 : blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

그렇습니다. 여러분이 알고 있는 거의 모든 이벤트 명칭이 다 포함되어 있습니다.

반면, 이미 특정 이벤트에 매핑되어 있는 처리기를 제거하기 위해서는 unbind 메서드를 사용합니다. 사용 예는 다음과 같습니다.

$("#MyBtn").unbind("click");

이 코드를 사용하면, 이제 click 이벤트에 연결되어 있는 모든 처리기가 삭제되기에, 더 이상 클릭을 해도 아무런 동작도 하지 않게 됩니다. 간단하죠?

또한, jQuery는 앞서 제가 언급했던 일회성 이벤트 처리를 지원하기 위한 one 이라는 메서드도 제공해 줍니다. 개인적으로 제가 참으로 좋아라하는 메서드입니다. 이는 이벤트 처리기를 딱 한번만 실행시키고 그 이상으로는 실행시키지 않는 일회성 매핑입니다. 다음 코드를 한번 보시졈.

$("#MyBtn").one("click"function() {
    
alert("누가 내 버튼을 클릭한 것이냐?");");
});

이제, 클릭 이벤트는 처음 클릭하는 경우에만 메시지박스를 보여주고, 그 이후의 클릭은 아무런 반응도 하지 않을 것입니다. 멋지죠? 이 메서드는 생각보다 자주 사용되며, 꽤나 유용합니다. 꼭 기억해 두세요~

마지막으로, trigger()라는 메서드도 존재하는데요. 이는 특정 이벤트를 코드를 사용해서 일으키기 위한 메서드입니다. 즉, 실제로 사용자가 클릭 액션을 하지 않았음에도, 클릭을 한 것처럼 이벤트를 일으키는 코드라는 것입니다. 예를 들면, 다음과 같이 코드를 작성할 수 있는데요.

$("#MyBtn").trigger("click");

이 코드는 사용자가 버튼을 클릭한 것처럼 클릭 이벤트를 일으키게 합니다. 코드를 사용해서 강제로 이벤트를 발생시키는 방법이라는 것이죠. ^^

이로써, 4가지 기본 이벤트 처리 메서드들을 알아보았는데요. 한가지 언급하지 않은 것은 각 메서드들이 두 번째 인자로 가지고 있는 data라는 인자입니다. 혹시 그것이 무엇을 위한 것인지 궁금하시지는 않았나요? 아? 그런게 있는지도 몰랐다고요? 아… 그..렇.. 군.. 요…

해서, 다시 한번 살펴보자면 bind 메서드의 기본적인 시그너처는 다음과 같았습니다.

bind( type, data, fn )

시그너처만 보면, bind 메서드에는 총 3개의 인자가 제공되어야 하는데, 위에서 우리는 인자를 2개만 작성했었죠? type과 fn을 말입니다. 허엇. 글고보니 인자를 2개밖에 제공을 안했는데 어떻게 이것이 올바르게 동작되었던 것일까? 두번째 인자는 data이지 fn이 아닌데 말이죠.

두 번째 인자인 data는 사실 선택적인 인자입니다. 즉, bind 메서드는 총 인자가 2개가 들어오면 내부적으로 첫 번째 인자를 type으로 인식하고, 두 번째 인자는 fn 으로 인식하게 됩니다. 그리고, 총 3개의 인자가 지정되는 경우에만 첫 번째 인자를 type으로, 두 번째 인자를 data로, 그리고 세 번째 인자를 fn으로 인식하는 것이죠. 해서, 앞의 예제에서는 인자를 2개만 전달해도 잘 동작했던 것입니다. 하하. 이해가 되시죠?

사실, 두 번째 인자는 그다지 자주 사용되지 않는 편인데요. 이는 이벤트 처리기에 “부가적으로” 전달할 데이터 개체(Json 등)를 지정하기 위한 인자입니다. 그리고, 이 데이터 개체는 처리기 함수 안에서 [event.data.속성명] 과 같은 코드를 통해서 그 값을 읽어올 수가 있습니다. 말로는 설명이 좀 거시기 하네요. 예를 한번 볼까요? 그럽시다.

$("#MyBtn").bind("click",
                 { name: 
"Taeyo", gender: "남" }, 
                 
function(e) {
                     
alert(e.data.name + " / " + e.data.gender);
           
});

보이다시피, 두 번째 인자로 { name: "Taeyo", gender: "남" } 라는 JSON 개체를 넘겨주고 있습니다. 이렇게 부가적인 데이터를 넘기면, 그 데이터를 이벤트 처리기 안에서 사용할 수가 있게 되는데요. 단, 그 데이터에 접근하려면 처리기 함수는 이벤트 데이터를 가져오기 위한 인자(예제의 경우, e)를 지정해 주어야 합니다. 그러면, e.data 라는 개체를 통해서 우리가 지정한 개체에 접근할 수가 있게 되는 것이죠. 예제에서 보이듯이 e.data.name, e.data.gender 와 같이 우리가 지정한 JSON 개체 속성에 접근하는 것을 볼 수 있습니다. 호옹~~ 뭔가 그럴싸하죠~ 그럴싸 하지만, 그다지 자주 사용하지는 않는다는 거~~ 그냥 기억만 해 두세요~

자자~~ 이로써 jQuery의 기본 이벤트 지원에 대해서 알아보았습니다. 그러니 이 내용을 종합적으로 다루는 예제를 하나 해봐야 하겠죠? 안 그럼 뭔가 좀 서운하잖아요. 날도 추워지는데!

EventEx1.htm
<html>
<head runat
="server">
    <title></title>
    <script src
="jquery-1.3.2.min.js" type="text/javascript"></script>
      <script type
="text/javascript">
          $(
function() {

              $(
"#MyBtn").bind("click",
                               { name: 
"Taeyo", gender: "남" },
                               
function(e) {
                                  
alert(e.data.name + " / " + e.data.gender);
                          
});


              
$("#MtSnow").one("click"function() {
                  
alert("이미지는 클릭하지 마세요. 두 번 말하지 않습니다");
              
});
          
});          
    
</script>
</head>
<body>
   
  <div id
="Mt">
    <img id
="MtSnow" src="resource/snowMt.png" />
  </div>
  <input type
="button" id="MyBtn" value="내 버튼" />
  
</body>
</html>

소스에서는 앞서 설명했던 메서드들 중 bind 메서드를 사용하고 있으며, 제가 아끼는 애메서드(홋! 명칭이 므흣하네)인 one을 실습해 보고 있습니다. 버튼의 클릭 이벤트는 앞서 설명했던 코드와 동일하기에 굳이 재설명할 필요가 없어보이고요. 이미지의 클릭 이벤트는 나름 개그로 한껏 멋을 부려 보았습니다. 개그 포인트는 “두번 말하지 않습니다” 이죠!!! 저 클릭 이벤트는 오직 한번만 실행될테니까요. 우핫핫!! 소스가 어떻게 동작할 것인지는 충분히 예상될 것 같은데요. 그 예상을 머리속에 그리시면서 결과 화면을 보시죠!!!

각각의 결과 화면은 이미지를 클릭했을 때와 버튼을 클릭했을 때의 결과입니다. 차이가 있다면, 버튼은 클릭할 때마다 메시지박스가 뜨는 반면, 이미지는 처음 클릭한 경우에만 메시지박스가 뜨고 그 이후에는 이미지를 아무리 클릭해도 반응이 없다는 것입니다. 바로 one의 위대함입니다. The One!!!(은근히, 드원 테크놀로지 광고까지 해주는군요!) 여러분도 몸소 체험학습을 해보시기 바랍니다.

이제 이렇게 이벤트를 바인드할 수 있다는 사실은 확실히 이해하셨을 겁니다.

하지만!!

분명히 속으로 이렇게 생각하고 계시죠? 불편해!!!! 라고!!

그렇습니다. bind가 뭡니까! bind가! 뭔가 좀 직관적이지 않다는 생각이 들 겁니다. 딴 언어에서는 클릭 이벤트는 click이라고 쓰면 되는데, jQuery는 뭔 bind("click"..) 이딴 식이야!! 이건 좀 별론데! 불편해!! 라고 생각하고 계시죠? 솔직히 말씀해 보세요~

그렇습니다. 불편합니다. jQuery 개발자들도 그것을 설마 모르겠습니까? 해서, jQuery는 여러분이 좀 더 직관적으로 이벤트 매핑을 할 수 있도록, 자주 사용하는 이벤트들에 대해 각각 특별한 이벤트 도우미를 제공하고 있습니다. 전체 목록은 http://docs.jquery.com/Events의 하단에서 확인하시기 바랍니다. 확인하기가 귀찮다면, 그냥 여러분이 애용하는 대부분의 이벤트에 대해 도우미가 제공된다고 생각하셔도 됩니다. 예를 들면, click, mouseover, focus 등등 여러분이 익히 알고 있는 이벤트 명칭과 동일한 메서드가 제공된다는 것입니다. 다만, 특이하게 dblclick 이벤트라는 것도 추가적으로 제공된다는 것은 기억할 필요가 있습니다. 그렇기에, 예를 들어보자면 앞선 예제의 이미지 클릭 이벤트는 다음과 같이 작성하실 수도 있습니다.

$("#MtSnow").click(function() {
   
alert("...");
});

그리고, 이벤트를 트리거 하려면 trigger() 메서드를 사용할 필요없이 $("#MtSnow").click(); 이라고 호출하면 됩니다. 인자 없이 메서드를 호출하면 이것은 트리거의 역할을 하는 것이죠.

호오. 그렇습니다. 이런게 바로 우리가 원하는 방식입니다. 사실, 실무에서도 bind 메서드를 사용해서 이벤트 매핑을 지정하기 보다는 이러한 이벤트 도우미 메서드를 사용해서 매핑을 하는 편입니다. bind 메서드를 사용하는 것은 실제 코드에서는 거의 찾아보기가 힘들 정도입니다(잘 사용하지도 않는 것을 앞에서 왜 그리 열내서 설명한거야! 라고 불평하실 수도 있겠지만, 기초는 중요한겁니다!!!)

오홋홋! 다만, 이렇게 이벤트 도우미 메서드를 사용하는 경우에는 추가 데이터를 지정할 수가 없습니다. 즉, bind 메서드의 두번째 인자였던 data 인자(이벤트 메서드에게 추가적으로 전달할 데이터)를 사용할 수 없다는 것이죠. 하지만, 그렇다해도 큰 문제는 없습니다. 클로저(Closure)를 사용하면 이벤트 메서드 내부에서 바깥 쪽의 지역 변수에 접근할 수가 있으니까요.

클로저가 무엇인지를 지금 설명드리기에는 적절하지 않아 보이기에, 이에 대해서는 나중에 따로 설명을 드리도록 하겠습니다.

자. 그럼 몇몇 이벤트 도우미를 사용해보는 예제를 한번 다루어보도록 합시다.

<html>
<head runat
="server">
    <title></title>
    <script src
="jquery-1.3.2.min.js" type="text/javascript"></script>
      <script type
="text/javascript">
          $(
function() {
              $(
"#Photo img").attr("src1"function() {
                  
return this.src;
                
})
                .mouseout(
function() {
                    
this.src = this.src1;
                
})
                .mouseover(
function() {
                    
this.src = this.src2;
                
})
                .dblclick(
function() {
                    $(
this).hide();
                
});
          
});
    
</script>
</head>
<body>
   
  <div id
="Photo">
    <img id
="img1" src="resource/SEA12.png" src2="resource/SEA13.png" />
    <img id
="Img2" src="resource/SEA13.png" src2="resource/SEA14.png" />
    <img id
="Img3" src="resource/SEA14.png" src2="resource/SEA15.png" />
  </div>  
</body>
</html>

어려운 소스는 아닙니다만, 약간의 기교가 들어가있는 코드임을 눈치채실 수 있으시죠? 이게 뭐가 '기교'라는 거얏! 이라고 성질 부리지는 마십시오. 이 문장에서 중요한 단어는 “기교”가 아니라 고 앞에 있는 “약간의” 입니다. '약간의 기교' 우핫핫~~~

일단, 이 페이지는 여러 개의 이미지를 가지고 있는데요. 각 이미지에는 src2라는 사용자 정의 어트리튜트가 지정되어 있는 것을 볼 수 있습니다. 사실 어트리뷰트의 명명 센스는 좀 구리긴 하지만, 어쨌든 그 어트리뷰트의 용도는 마우스가 이미지 위로 올라올 경우에 바꿔 보여지게 할 이미지 경로를 위한 것입니다.

자. 이제 jQuery 소스를 보도록 합시다. 소스에서는 이전 강좌에서 배운 attr 메서드를 사용해서 셀렉트된 각각의 이미지 요소에 대해 사용자 정의 어트리뷰트인 src1을 지정하고 있습니다. 이는 원본 이미지의 경로를 저장해놓기 위한 것인데요. 만일, 이 코드를 사용하지 않는다면, 각각의 이미지 태그들은 원본 이미지 경로를 위해서 다음과 같이 작성되었어야 할 것입니다.

<img id="img1" src="resource/SEA12.png" 
     src1
="resource/SEA12.png" src2="resource/SEA13.png" />

강조하지만, 저는 사용자 정의 어트리뷰트의 사용을 권장하지는 않습니다. 이것은 어디까지나 예일 뿐이니까요.

설명이 빠르고 간결하면서도 친절하니깐 이해가 쉽고 확실하게 되시죠? 그러면, 계속해서 코드를 볼까요? 이어지는 코드는 3 가지의 이벤트 처리기를 지정하고 있습니다. mouseout, mouseover, dblclick 이 그것이죠. 또한, 이들을 멋지게도 메서드 체인을 사용해서 한방에 주욱 걸어주고 있습니다. 각각의 이벤트 처리기의 역할은 코드만 봐도 쉽게 이해가 될 정도로 간단합니다. mouseout인 경우에는 해당 이미지가 원래의 이미지를 보여주도록 설정하고, mouseover인 경우에는 대체 이미지(src2)를 보여주도록 설정하고 있습니다. 즉, 마우스가 이미지 위로 올라오고 나감에 따라 이미지가 바뀌어 보인다는 것입니다. 그리고, 따블클릭 시에는 해당 이미지를 눈에 보이지 않게 숨겨버리고 있죠. hide() 메서드는 일종의 애니메이션 메서드인데 이름만으로도 뭐하는 메서드인지 화끈하게 감이 오시겠지만 구체적인 설명은 추후 "애니메이션" 강좌에서 드리도록 하겠습니다. 지금은 대상 개체를 숨겨버리는 역할(즉, display:none)을 한다고만 알아두시면 되겠습니다.

이 얼마나 적절한 조화를 이루는 예제입니까? 이전 강좌를 복습까지 시켜주는 센스란!! 아아~

자. 그렇다면 결과 화면을 확인해 보도록 해요.

위의 결과 화면은 3 개의 이미지 중 하나를 더블클릭을 해서 사라지게 한 상태이고요. 오른쪽 이미지에 마우스를 올려서 원래의 이미지가 아닌 대체 이미지가 나오고 있는 상황입니다. 얼핏 보기엔 그냥 이미지 2개를 올려둔 것처럼 보이시겠지만 그렇지 않아욧!

여러분도 직접 예제를 작성하고 해보시길 권해봅니다. 그러면, 예상대로 동작하는 것을 확인하실 수 있을 것입니다. 괜찮다~~~

여기까지의 설명으로 jQuery 이벤트에 관한 70% 이상의 이야기를 드린 것 같네요. 아직 약간의 재미난 이벤트가 남아있긴 하지만 말이죠. 남아있는 이벤트는 hover, toggle, live 등인데요. 원래는 이번 강좌에서 이벤트에 대한 모든 이야기를 다 하려고 했었습니다만, 예상했던 것보다 강좌가 너무 길어져 버렸어요. 해서, 한번 끊어가도록 하겠습니다. 이해해 주실거죠?? 잇힝~


authored by

  goni0607
  2009-10-12(16:13)
캐릭 이미지
우어~ 빠른 연좌군욧!!

선리플 후정독!! 잘 보겠습니다~ 감사합니다~ 꾸뻑~ ^0^

  kjhnice79
  2009-10-12(17:54)
캐릭 이미지
이야 ~ 이제는 이벤트 관련 강좌네용 ㅋㅋ

늘 감사히 읽고 있습니다 ^^ 감사합니다. ~

  violeter33
  2009-10-13(11:30)
캐릭 이미지
헛;; 선리플 후정독!!

무죠건 화이링 입니다~

  wildmoon
  2009-10-14(13:23)
캐릭 이미지
항상 유익하고 재밌는 강좌~~ 감사해요 ^^
다음 강좌도 벌써 기다려져요~

  hyun2hyun2
  2009-12-09(17:25)
캐릭 이미지
강좌 감사합니다
  ktseo91
  2010-03-02(17:13)
캐릭 이미지
강좌 잘 봤습니다.
감사합니다...

  summleo
  2010-07-14(17:12)
캐릭 이미지
잘 보고 있습니다 ^^감사합니다.
  loolooi
  2010-08-16(18:28)
감사합니다..잘 봤습니다
  gksdy2000
  2012-06-15(06:50)
감사히 잘보고 있습니다.

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})