jQuery 1.4.2 delegate

jQuery 1.4.2에 두 가지의 메서드가 추가되었습니다. .delegate()와 .undelegate()가 그것인데요. .undelegate()는 그냥 .delegate()의 해제 메서드이므로 .delegate()를 가지고 알아보려고 합니다.

.delegate()는 .live()를 대신하여 추가된 메서드입니다. .delegate()와 .undelegate()는 특정 루트와 특정 이벤트에 대한 처리를 단순화 합니다. 그리고 기존의 .live()의 단점을 보안하였습니다.

사실 1.3버전에 추가된 .live()는 .bind()를 사용함에 있어서 보다 더 유연하게 이벤트에 접근할 수 있었습니다.

기존에는 동적으로 생성되는 엘리먼트에 이벤트를 걸려면 재 .bind()를 해야 하는 번거로운 작업이 필요했습니다. 이것을 .live()는 동적으로 추가되는 개체들에 대해서도 이벤트를 그대로 상속해 줄 수 있습니다.

말 그대로 이벤트를 살아있게 하는 거죠. 해제는 .die() 메서드로 하면 되죠.(죽이는 건가!)

예) td클릭시 <tr>행이 추가되면서 동시에 클릭 이벤트가 바인딩

$(function() {

$("td").live("click", function() {

$(this).parent().parent().after("<tr><td><p>"+text+"</p></td></tr>");

});

</script>

하지만 약간의 문제점이 있었습니다.

첫 번째로는 탐색(Traversing)메서드를 사용하여 필터링이나 찾기를 통해서는 접근할 수 없습니다.

예) $("td").eq(1).live("click", function() {

$(this).parent().parent().after("<tr><td><p>"+text+"</p></td></tr>"); });

두 번째로는 기본 DOM 엘리먼트는 찾지 못합니다.

예) $(document.body).live("click", function(){});

세 번째로는 체인의 맨 위에 있어야 가능합니다.

$("ul li").live("click", function() { });

그러면 필터 같은 탐색을 이용하여 개체를 찾아 이벤트를 적용시키기 위해서는 일일이 each문을 써서 돌려야 합니다.

예)

$("table").each(function() {

$("td", this).live("hover", function() {

$(this).toggleClass("hover"); });

});// .live()

$("table").each(function() {

$("td", this).die("hover");}); // .die()

반면 .delegate()를 쓴다면 어떻게 될까요?

예)

$("table").eq(1).delegate("td:odd","click", function() {

$(this).parent().parent().after("<tr><td><p>과일</p></td></tr>");});

필터가 가능하단거죠. .live()보다 강력하죠. ^^*

.delegate(selector, eventType, handler)

selector: 타겟인 엘리먼트

eventType: 이벤트 명 지정(click,keydown등)

handler: 실행할 이벤트 지정

--------------------------------------------------------------------------------------------------------------------------

U&I