.delegate()

셀렉터 표현식과 일치하는 엘리먼트나 앞으로 새로 만들어질 엘리먼트에 이벤트 핸들러 함수를 연결한다.

.delegate(selector, eventType, [enentData,] handler)

.delegate(selector, events)

.delegate(selector, eventType, [eventData,] handler)

 ◎ selector : 이벤트를 발생시킬 엘리먼트를 필터링할 셀렉터 표현식

 ◎ eventType : click, keydown 같은 자바스크립트 이벤트 타입의 이름. 여러 개의 이벤트를 처리하려면 이벤트를

   빈 문자열로 구분

 ◎ eventData(옵션) : 이벤트 핸들러로 전달할 데이터를 담은 데이터 맵

 ◎ handler : 이벤트가 발생했을 때 실행할 이벤트 핸들러 함수

.delegate(selector, events)

 ◎ selector : 이벤트 발생을 전달할 엘리먼트를 필터링할 셀렉터 표현식

 @ events : 이벤트 타입별로 이벤트 핸들러 함수가 할당된 자바스크립트 객체 맵

반환값

메서드 연쇄 호출을 지원하는 jQuery 객체

설명

.delegate() 메서드는 .live() 메서드와 동작방식이 매우 비슷하다. .delegate() 메서드는 아직 문서를 만들지 않는 DOM 엘리먼트를 대상으로 이벤트 핸들러가 실행되게 한다. .delegate() 메서드로 이벤트 핸들러 함수를 연결하면 이벤트가 발생했을 때 대상 엘리먼트의 자손 엘리먼트 가운데 셀럭터 표현식과 일치하는 엘리먼트로 이벤트를 전달한다. .delegate() 메서드는 jQuery 1.4.2 버전부터 사용할 수 있다.

.delegate() 메서드는 .live() 메서드를 대체해서 사용할 수 있다. 다음과 같이 .live() 메서드를 사용해야 할 때 .delegate() 메서드를 사용해서 좀더 간단하게 코드를 작성할 수 있다.

$("table").delegate("td", "hover", funtion(){

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

});

위 예제를 .live() 메서드를 사용해서 작성하면 다음과 같다.

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

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

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

    });

});

.live() 메서드는 DOM 탐색 메서드를 사용해서 필터링하거나 엘리먼트를 찾을 수 없고, 기본 DOM 엘리먼트(document.body)를 검색할 수 없으며, 메서드 체인을 사용할 수 없는 몇 가지 문제점이 있다. .delegate() 메서드는 이 점을 보완해서 jQuery 1.4.2 버전부터 새로 추가된 메서드다. .delegate() 메서드로 연결된 이벤트 핸들러의 연결을 해제하는 메서드는 .undelegate() 메서드다.

<p>Click me!</p>

$("body").delegate("p", "click", function(){

    $(this).after("<p>Another paragraph!</p>");

});