변화된 환경에서 이벤트 취소하기

문제

이벤트가 다른 이벤트로 전파되기 전에 폼 전송과 같은 이벤트를 취소해야 한다.

해결

이벤트를 취소하는 재사용 가능한 함수를 만들면 된다.

//이벤트 취소
function cancelEvent(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}
...
function validateForm(evt){
    evt = evt || window.event;
    cancelEvent(evt);
}

설명

처리를 완료하기 전에 이벤트를 취소하고 싶을 때가 있다. 예를 들어 폼 요소가 유효하지 않으면 기본 폼 전송 동작을 막아버리는 것이 이에 해당한다.

순수한 DOM 레벨 0 이벤트 핸들링은 false를 반환하여 이벤트를 취소할 수 있다.

function formSubmitFunction(){
    ...
    if(bad){
        return false;
    }
}

더 복잡한 이벤트 핸들링에서는 이벤트 모델에 상관없이 이벤트를 취소할 수 있는 함수를 만들어야 한다.

이벤트 객체에 preventDefault라는 메서드가 있으면 호출한다. preventDefault 메서드는 폼 전송과 같은 기본 동작을 막는다.

preventDefault를 지원하지 않으면 returnValue라는 이벤트 속성을 false로 설정한다. 이 방식은 DOM 레벨 0 이벤트 핸들링에서 false를 반환하는 것과 같은 효과를 낸다.