jQuery의 click이벤트에 관한 메모

아래의 코드에서 unbind(‘click’) 표기가 없을 경우, 이미 $(‘input[id^=attachmentData]’)에 click이벤트가 선언되어 있을 경우엔 같은 이벤트가 중복되어 선언되어 버립니다.

 

$('#elementId').unbind('click').click(function () {
	// 하고싶은 처리
});

 

어째서 unbind('click')가 없으면 안되는 것일까요?

 

 

바람직하지 않은 예

아래와 같은 초기설정을 하는 init함수 안에서 click이벤트를 설정한 경우
※SPA개발에서 1개의 화면에서 상세화면을 표시하거나 닫거나 하는 케이스를 상정했습니다.

 

function init(){
	$('#elementId').click(function () {
		// 하고싶은 처리
		console.log('무언가의 처리');
	});
}

 

1번째의 초기설정 후(ex) SPA 화면에서 처음으로 상세화면을 표시)

무언가의 처리(click이벤트가 1번 실행됨)

 

2번째의 초기설정 후(ex) SPA화면에서 2번째로 상세화면을 표시)

무언가의 처리(1번째에 선언된 click이벤트가 실행됨)
무언가의 처리(2번째에 선언된 click이벤트가 실행됨)

 

3번째의 초기설정 후(ex) SPA화면에서 3번째로 상세화면을 표시)

무언가의 처리(1번째에 선언된 click이벤트가 실행됨)
무언가의 처리(2번째에 선언된 click이벤트가 실행됨)
무언가의 처리(3번째에 선언된 click이벤트가 실행됨)

위의 상태가 새로 화면을 렌더링 할때까지 영원히 계속됩니다…
당연히 정상적인 처리가 아니므로 이런식으로 만들면 안됩니다.

물론 SPA가 아닌 경우엔 문제가 없을수도 있습니다.

 

 

바람직한 예

전제조건은 바람직하지 않은 예와 같습니다.

function init(){
	$('#elementId').unbind('click').click(function () {
		// 무언가의 처리
		console.log('무언가의 처리');
	});
}

 

1번째의 초기설정 후(ex) SPA 화면에서 처음으로 상세화면을 표시)

무언가의 처리

click이벤트가 1번 실행됨

 

 

2번째의 초기설정 후(ex) SPA화면에서 2번째로 상세화면을 표시)

무언가의 처리

기본의 click이벤트는 모두 무효가 되고, 2번째로 선언된 이벤트만 실행됨

 

 

3번째의 초기설정 후(ex) SPA화면에서 3번째로 상세화면을 표시)

무언가의 처리

기본의 click이벤트는 모두 무효가 되고, 3번째로 선언된 이벤트만 실행됨