반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

.delegate() 메소드 알아보기

2012. 8. 23. 10:58 | Posted by 솔웅


반응형

.delegate()


오늘 일하다가 눈에 띈 몇가지 jQuery API를 공부해 보겠습니다.


다른 사람이 만든 소스를 보다 보니까 .delegate() 메소드를 사용한게 있었는데요.

jQuery API에는 이 .delegate() 메소드는 1.4.3 버전에서 사용한 것이고 1.7 버전에서는 .on() 메소드를 사용하고 있다고 하네요.


그 신택스는 아래와 같네요.


$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+


약간 바뀌었죠.

$("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); });

위 소스코드는 1.7 버전에서 아래와 같이 사용할 수 있다고 합니다.


$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});






그럼 곧바로 예제를 보죠.


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ background:yellow; font-weight:bold; cursor:pointer;
      padding
:5px; }
  p
.over { background: #ccc; }
  span
{ color:red; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Click me!</p>

 
<span></span>
<script>
    $
("body").delegate("p", "click", function(){
      $
(this).after("<p>Another paragraph!</p>");
   
});
</script>

</body>
</html>


스크립트 부분을 보면 <body> 내에서 p 태그안에 있는 콘텐츠를 클릭하면 그 p 태그 다음에 <p> Another paragraph!</p> 를 추가하는 겁니다.


두번째 샘플을 보죠


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ color:red; }
  span
{ color:blue; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
 
<button>Trigger custom event</button>
 
<span style="display:none;"></span>
<script>

    $
("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $
(this).text("Hi there!");
      $
("span").stop().css("opacity", 1)
               
.text("myName = " + myName)
               
.fadeIn(30).fadeOut(1000);
   
});
    $
("button").click(function () {
      $
("p").trigger("myCustomEvent");
   
});

</script>

</body>
</html>


스크립트를 해석해 보자면.

먼저 밑에 button 부분을 봐야 겠네요.

버튼이 클릭되면 myCustomEvent 가 trigger 되네요.


그 다음에 delegate 부분을 봐야 되는데요.

이 myCustomEvent가 trigger 되면 p 태그 부분을 Hi there! 로 고치고 span 부분에 myName = myName 을 표시하는데 잠깐 나타났다가 서서히 사라지는 효과가 나타납니다.



반응형