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");
'웹관련 > JavaScript-Jquery' 카테고리의 다른 글
[자바스크립트] Cookie 함수로 정의하기 (0) | 2016.09.22 |
---|---|
[Jquery] 종종헷갈리는 - text(),html(),val(),attr() (0) | 2016.09.22 |
[자바스크립트] animate 속성정리 (0) | 2016.09.22 |
[자바스크립트] rotate,scale 지원하지 않지만 사용할수 있도록 해주는 플로그인 (0) | 2016.09.22 |
[자바스크립트] 이미지 프리로딩 (window.load) (0) | 2016.06.10 |
댓글