jquery on function 함수.

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");