[JavaScript/jQuery/Namespace] 이벤트 1회 적용하고 제거하기

프론트에서 어떠한 함수를 호출 시 클릭이벤트를 적용하고 클릭이벤트가 발생 시 이벤트를 제거하고 싶었다.

그래서 처음에는 아래와 같이 코드를 작성하였다.

 

function showAlert(msg, type, btnMsg, act, btnCallback) {

	// TODO 로직..

	if ( btnCallback != null && typeof btnCallback == "function" ) {
		$("#modal-myAlertPop").on("click", function() {
			btnCallback();
			$(this).off("click");
		});
	}
    
}

 

저러한 코드의 경우 해당 DOM의 대한 모든 click이벤트가 사라지다보니 난감한 경우가 생기더라.

나의 목표는 내가 적용한 이벤트만 제거하고 싶은데, 어떠한 방법이 없을까 하고 찾아보니 이벤트 부분에 네임스페이스를 사용하면 된다는것을 알고 바로 적용해보았다.

 

function showAlert(msg, type, btnMsg, act, btnCallback) {

	// TODO 로직..

	if ( btnCallback != null && typeof btnCallback == "function" ) {
		$("#modal-myAlertPop").on("click.btnCallBack", function() {
			btnCallback();
			$(this).off("click.btnCallBack");
		});
	}
    
}

 

위의 코드와 같이 네임스페이스를 사용하여 이벤트 적용 후 제거를 하면 내가 적용한 이벤트만 사리지는것을 확인하였다.