.delegate()
원문 링크 
http://api.jquery.com/delegate/
개요 : 루트 요소의 특정 집합을 기반으로, 지금 또는 나중에, 선택과 일치하는 모든 요소에 대해 하나 이상의 이벤트 처리기를 묶어줍니다.
- .delegate( selector, eventType, handler )
- selector 이벤트를 발생할 요소를 걸러낼 선택자.
- eventType 공백으로 구분된 하나 이상의 JavaScript 이벤트를 포함하는 문자열, "click", "keydown" 또는 사용자 정의 함수명.
- handler 이벤트가 발생할 때 실행될 함수.
- .delegate( selector, eventType, eventData, handler )
- selector 이벤트를 발생할 요소를 걸러낼 선택자.
- eventType 공백으로 구분된 하나 이상의 JavaScript 이벤트를 포함하는 문자열, "click", "keydown" 또는 사용자 정의 함수명.
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler 이벤트가 발생할 때 실행될 함수.
- .delegate( selector, events )
- selector 이벤트를 발생할 요소를 걸러낼 선택자.
- events 하나 이상의 이벤트와 이벤트에서 실행될 함수.
jQuery 1.7 에서, .delegate() 를 .on() 함수가 대체하게 되었습니다. 하지만, 이전 버전에서는 delegation이 이벤트를 사용하는 가장 유용한 방법이었습니다.. 더 많은 정보를 원하시면 .on() 함수를 참고하시기 바랍니다. 아래는 두 함수의 일반적인 사용법입니다.
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+
.delegate() 코드를 더 살펴보면 :
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
});위 구문을 .on() 함수로 바꿔본다면 :
$("table").on("click", "td", function() {
$(this).toggleClass("chosen");
});delegate() 함수로 바인딩 된 이벤트를 제거하려면 .undelegate() 함수를 참고하세요.
예 제
문단(p)를 클릭하면 문단을 하나 추가하기.
<!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>미리보기
delegate() 함수는 새로 추가된 p에도 자동적용되네요. 새로 만들어진 애들 클릭해도 또 추가되요. 왜 그럴까요. delegate('p'....)에서 p에 click 이벤트를 적용하니 그런것 같습니다.
예 제
p를 클릭하면 안에 있는 텍스트를 알림창으로 보여주기
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});예 제
a 태그를 클릭하면 링크 이동을 취소시키기
$("body").delegate("a", "click", function() { return false; })예 제
preventDefault 함수를 사용해서 기본 이벤트를 취소시키기
$("body").delegate("a", "click", function(event){
event.preventDefault();
});예 제
사용자 정의 함수 바인딩하기
<!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>미리보기
위의 예제들하고는 좀 다르네요. 일단 p와 연결된 이벤트 함수가 myCustomEvent로 사용자 정의 함수죠. 버튼을 클릭하면 trigger(방아쇠를 당긴다는 의미입니다.)로 사용자정의함수를 실행시키고 있습니다. 'Hi, there!' 문자가 바뀌고 페이드 아웃 하는 기능을 수행하도록 되어 있습니다. $(this)는 p가 되겠죠. 이해되시죠??
바인딩을 하는 여러가지 방법이 있네요. 그 중 편한 방법을 사용하심 될것 같습니다. 최신인 1.7버젼에서 추가된 on(), off()를 써보시면 어떨까요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - event.target, 이벤트가 발생한 요소 (2) | 2011.12.13 |
|---|---|
| jQuery API 정복 - event.pageY, 마우스 Y 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - event.pageX, 마우스 X 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - die(), 이벤트 해제하기 (2) | 2011.12.08 |
| jQuery API 정복 - 더블클릭 이벤트, dblclick() (4) | 2011.11.25 |
| jQuery API 정복 - 클릭 이벤트, click() (0) | 2011.11.25 |
| jQuery API 정복 - 변경 이벤트, change() (0) | 2011.11.24 |
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |