[Javascript] 이벤트 진행 막기 or 다시 시작

이벤트를 다룰 때 종종 이벤트의 본래 행동은 막은 후 다른 것을 진행한 다음 다시 그 이벤트를 진행해야 할 때가 있다.

오늘은 이러한 상황에서 사용하는 명령어를 간단하게 알아보겠다. 예제 코드는 아래와 같다.

 

먼저 JQuery를 사용했기 때문에 CDN으로부터 가져와준다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".lookup-btn").click(function(event){
    event.preventDefault();
    
    //쿠키 존재 여부
    var cookie = document.cookie;
    var modal = document.getElementById('myModal');
    var isCookie = document.cookie.indexOf('sb');
    
    //없으면 modal창 키고 있으면 원래 행동 진행
    if(!isCookie){
        modal.style.display = "block";
    } else {    
        $(this).unbind('click').click()
    }
});
</script>

여기서 핵심은 이벤트는 아래 코드로 막아줬다는 점이다.

event.preventDefault();

 

그리고 마지막 줄의 코드로 다시 해당 이벤트를 할당해줬다. 

unbind('event')는 JQuery에 의해 등록된 이벤트인 event를 제거해준다는 의미이다.

작성한 이벤트를 제거해주고 다시 클릭을 해주면 원래 태그가 해야하는 역할을 하게 된다. 

event.preventDefault() 반대라고 생각하면 된다.

$(this).unbind('click').click()

 

비단 클릭 뿐만 아니라 submit과 같은 다른 이벤트에도 동일하게 동작한다.