HTML의 cancelable(취소 가능) 이벤트 속성은 발생한 이벤트가 취소 가능한 이벤트인지 여부를 확인하는 데 사용됩니다. 해당 이벤트가 취소 가능하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
여기서 '취소 가능한 이벤트'란 preventDefault() 메서드를 호출하여 브라우저의 기본 동작을 중단시킬 수 있는 이벤트를 의미합니다. 예를 들어 폼 제출(form submit)이나 클릭(click) 이벤트는 일반적으로 취소가 가능하지만, 로드(load)나 언로드(unload) 같은 일부 이벤트는 취소할 수 없습니다.
문법
cancelable 속성의 기본 문법은 다음과 같습니다.
event.cancelable
반환값은 불리언(Boolean) 타입으로, 이벤트가 취소 가능한 경우 true, 취소가 불가능한 경우 false입니다.
예제 코드
아래 예제는 버튼을 클릭했을 때 해당 클릭 이벤트가 취소 가능한 이벤트인지 화면에 표시해 줍니다.
<!DOCTYPE html>
<html>
<body>
<h2>취소 가능 이벤트 확인하기</h2>
<p>아래 버튼을 클릭하면 해당 이벤트가 취소 가능한지 여부가 표시됩니다.</p>
<button onclick="myFunction(event)">클릭하세요</button>
<p id="myid"></p>
<script>
function myFunction(event) {
var val = event.cancelable;
document.getElementById("myid").innerHTML = val;
}
</script>
</body>
</html>실행 결과
페이지를 실행하면 다음과 같은 초기 화면이 나타납니다.
버튼을 클릭하면 클릭 이벤트에 대한 취소 가능 여부가 불리언 값(true 또는 false)으로 화면에 출력됩니다. 클릭 이벤트는 기본적으로 취소가 가능한 이벤트이므로 true가 표시되는 것을 확인할 수 있습니다.
정리
event.cancelable 속성은 이벤트 객체에서 간단히 확인할 수 있는 불리언 값으로, preventDefault() 호출 전에 해당 이벤트의 기본 동작을 막을 수 있는지 판단하는 용도로 유용하게 활용됩니다.