[jQuery] 그룹 이벤트 등록 및 삭제

 

그룹 이벤트 등록 메서드

그룹 이벤트 등록 메서드를 사용하면 한 번에 2개 이상의 이벤트를 등록할 수 있다.

 

on() 

on() 메서드는 '라이브 이벤트 등록 방식'을 사용하여 동적으로 생성된 요소(새롭게 생성, 복제)에도 이벤트를 등록할 수 있다.

 

$([document] | "이벤트 대상의 상위 요소"]).on("이벤트 종류", "이벤트 대상 선택" , function() {

                 자바스크립트 코드;

});

---

delegate() / one()

delegate() 이벤트 등록 메서드는 선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

one() 이벤트 등록 메서드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다. '라이브 이벤트' 등록 가능

 

deleate()

$([document | "이벤트 대상의 상위 요소]).delegate("이벤트 요소 선택", "이벤트 종류", function(){

                자바스크립트 코드;

});

 

one() 기본 이벤트 등록

$("이벤트 대상 선택").one("이벤트 종류", function(){

            자바스크립트 코드;

});

 

one() 라이브 이벤트 등록 방식

$([document | "이벤트 대상의 상위 요소]).one("이벤트 종류", "이벤트 대상 요소 선택", function(){

                자바스크립트 코드;

});

 

 

---

off() / unbind() / undelegate()

이벤트 제거 메서드를 사용하여 이벤트를 제거할 수 있다.

 

1. on() 이벤트 해제를 위한 off() 메서드

-기본 이벤트 제거

$("이벤트 대상 요소 선택").off("이벤트 종류");

-라이브 이벤트 제거

$([document | "이벤트 대상 상위 요소"]).off("이벤트 종류" , "이벤트 대상 요소 선택");

 

2. bind() 이벤트 해제를 위한 unbind() 메서드

$("이벤트 대상 요소 선택").unbind("이벤트 종류");

 

3. delegate() 이벤트 해제를 위한 undelegate() 메서드

$("이벤트 대상 요소 선택").delegate("이벤트 종류");

-라이브 이벤트 제거

$([document | "이벤트 대상 상위 요소"]).undelegate("이벤트 대상 요소 선택", "이벤트 종류");