[Do it!] 07. 제이쿼리 이벤트 [2.그룹 이벤트 등록 및 삭제하기]

그룹 이벤트 등록 메서드

한 번에 2개 이상의 이벤트 등록 가능

 

그룹 이벤트 등록 메서드의 종류

종류	설명
on()	이벤트 대상 요소에 2개 이상의 이벤트 등록 이벤트 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트 적용 가능
bind()	2개 이상의 이벤트 등록
delegate()	선택한 요소의 하위 요소에 이벤트 등록 이벤트 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트 적용 가능
one()	1개 이상의 이벤트 등 지정한 이벤트가 1회 발생하고 자동으로 해제됨

 

on() 메서드

선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있음

즉, 동적으로 생성되거나 복제된 요소에도 이벤트가 등록됨

동적으로 생성된 요소에도 이벤트가 등록되는 on() 메서드의 '라이브 이벤트 등록 방식'의 기본형

$([document | "이벤트 대상의 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function(){
	자바스크립트 코드;
});

 

delegate() / one() 이벤트 등록 메서드

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

$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 선택", "이벤트 종류",function(){
	자바스크립트 코드;
});

 

one() 이벤트 등록 메서드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거됨

one() 이벤트 등록 메서드도 등록 방식에 따라 '라이브 이벤트'의 등록이 가능함

//one() 기본 이벤트 등록 방식
$("이벤트 대상 선택").one("이벤트 종류", function(){
	자바스크립트 코드;
});

//one() 라이브 이벤트 등록 방식
$([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 선택", function(){
	자바스크립트 코드;
});

 

이벤트 제거 메서드

이벤트 제거 메서드의 종류

종류	설명
off()	on() 메서드로 등록한 이벤트 제거
unbind()	bind() 메서드로 등록한 이벤트 제거
undelegate()	delegate() 메서드로 등록한 이벤트 제거

 

off() / unbind() / undelegate()로 이벤트 해제하기

//on() 이벤트 해제를 위한 off() 메서드
-기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").off("이벤트 종류");
-라이브 이벤트 제거 방식
$([document | "이벤트 대상 상위 요소 선택"].off("이벤트 종류", "이벤트 대상 요소 선택");

//bind() 이벤트 해제를 위한 unbind() 메서드
$("이벤트 대상 요소 선택").unbind("이벤트 종류");

//delegate() 이벤트 해제를 위한 undelegate() 메서드
-기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").undelegate("이벤트 종류");
-라이브 이벤트 제거 방식
$([document | "이벤트 대상 상위 요소 선택"].undelegate("이벤트 대상 선택", "이벤트 종류");