HTML DOM의 cancelable(취소 가능) 이벤트 속성은 JavaScript가 반응할 수 있는 HTML 이벤트와 연관된 속성입니다. 이 속성은 해당 이벤트가 취소될 수 있는지 여부를 나타내는 불리언(Boolean) 값, 즉 true 또는 false를 반환합니다.
반환값이 true라면 preventDefault() 메서드를 통해 이벤트의 기본 동작을 막을 수 있고, false라면 기본 동작을 취소할 수 없습니다.
구문(Syntax)
cancelable 이벤트 속성의 구문은 다음과 같습니다.
event.cancelable
예제(Example)
cancelable 이벤트 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼 위에 마우스를 올려 onmouseover 이벤트가 취소 가능한지 확인해 보세요</p>
<button onmouseover="cancelFunction(event)">CLICK IT</button>
<p id="Sample"></p>
<script>
function cancelFunction(event) {
var x = event.cancelable;
if(x==true)
document.getElementById("Sample").innerHTML = "onmouseover 이벤트는 취소 가능합니다";
else
document.getElementById("Sample").innerHTML = "onmouseover 이벤트는 취소할 수 없습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CLICK IT 버튼 위에 마우스를 올리면 아래와 같이 결과가 표시됩니다.
코드 설명
먼저 CLICK IT 버튼을 생성하고, 버튼 위에 마우스를 올리면 onmouseover 이벤트 객체가 cancelFunction(event) 메서드로 전달되도록 구현했습니다.
<button onmouseover="cancelFunction(event)">CLICK IT</button>
cancelFunction(event) 메서드는 전달받은 이벤트 객체의 event.cancelable 값을 확인하여 변수 x에 할당합니다. 이후 조건문을 통해 반환값이 true인지 false인지 판별하고, 그 결과에 따라 적절한 메시지를 id가 “Sample”인 <p> 태그에 출력합니다.
function cancelFunction(event) {
var x = event.cancelable;
if(x==true)
document.getElementById("Sample").innerHTML = "onmouseover 이벤트는 취소 가능합니다";
else
document.getElementById("Sample").innerHTML = "onmouseover 이벤트는 취소할 수 없습니다";
}참고: cancelable과 preventDefault()의 관계
cancelable 속성은 단독으로 사용되기보다 preventDefault() 메서드와 함께 활용되는 경우가 많습니다. 예를 들어 폼 제출(submit) 이벤트나 마우스 휠(wheel) 이벤트처럼 취소 가능한 이벤트에서는 preventDefault()를 호출해 브라우저의 기본 동작을 차단할 수 있습니다.
반대로 load, unload, scroll 등 일부 이벤트는 취소가 불가능하므로, preventDefault()를 호출해도 기본 동작이 그대로 실행됩니다. 따라서 이벤트 핸들러 작성 시 event.cancelable 값을 먼저 확인하면 불필요한 오류를 방지하고 더 안정적인 코드를 작성할 수 있습니다.