[jQuery] 이벤트 설정 시에 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");

 

[출처] http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html