<< SHA1 + salt로 패스워드 보안 이슈 회피가 가능한가? | Home | 자존감과 믿음을 타파하자. >>

이벤트 설정 시에 jQuery의 .on()을 사용하자.

jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다.

개요

.bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다.

.bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").bind("click", handler);
$(".foo").on("click", handler);

.delegate()는 이벤트 설정을 부모에 대해 한다. 이런 방식을 이벤트 대리자라고 명명한다.

.foo에 이벤트를 설정하면 다음과 같이 사용된다.
$("#container").delegate(".foo", "click", handler);
$("#container").on("click", ".foo", handler);

.live()는 이벤트의 설정 대상이 document가 된다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").live("click", handler);
$(document).on("click", ".foo", handler);

.on()을 사용해야 하는 이유

1. .on()으로 통합 될 예정

.live()와 .die()는 jQuery 1.9에서 빠졌고(1.7 Deprecations), .delegate()도 향후 없어질 예정이어서 .on을 사용하는 습관을 가지자.

2. .on()으로 여러 종류의 이벤트 설정이 가능

- 첫번째 인자에 공백로 구분자로 해 여러 이벤트에 대응이 가능하다.
$(".foo").on("change blur", handler);

- 각 이벤트에 여러 처리자를 둘 수 있다.
. 하나의 elements에 여러 이벤트 설정
$(".foo").on({ 
  "change" : function(){...},
  "blur" : function(){...} 
});

. 이벤트 대리자에서의 여러 이벤트 설정
$("#container") on ( { 
  "change" : function(){...},
  "blur" : function(){...} 
}, ".foo");
Tags :


Re: 이벤트 설정 시에 jQuery의 .on()을 사용하자.

 <span style="font-family: AppleGothic; ">.delegate(selector, eventType, handler)는 부모(자신)에 대해 이벤트를 설정한다기보다</span>

<p style="margin: 0px; font-family: AppleGothic; ">자신의 자식요소중에 selector에 해당하는 놈들만 필터링해서 이벤트를 바인딩하는 개념인 듯 합니다.. ^^;

<p style="margin: 0px; font-family: AppleGothic; ">확실히 delegate보다는 on이 간결하고 좋네요.. jquery의 매력은 역시 간결미입니다..ㅎㅎ

Re: 이벤트 설정 시에 jQuery의 .on()을 사용하자.

 가장정확한거 같습니다

마니배우고갑니다

 

Re: 이벤트 설정 시에 jQuery의 .on()을 사용하자.

쉽고 빠르게 배웠습니다 감사합니다.


Add a comment Send a TrackBack