HTML DOM 취소 가능 이벤트 속성은 JavaScript가 이러한 이벤트에 반응할 수 있으므로 HTML 이벤트와 연결됩니다. 취소 가능한 이벤트 속성은 이벤트를 취소할 수 있는지 여부를 나타내는 부울 true 또는 false를 반환합니다.
구문
다음은 취소 가능한 이벤트 속성의 구문입니다 -
event.cancelable
예시
취소 가능한 이벤트 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<p>Hover over the button below to find out if onmouseover is cancellable event or not</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 = "The onmouseover event is cancellable";
else
document.getElementById("Sample").innerHTML = "The onmouseover event is not
cancellable";
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CLICK IT 버튼 위로 마우스를 가져가면 -
먼저 마우스를 가져갈 때 ommouseover 이벤트 개체를 cancelFunction(event) 메서드에 전달할 CLICK IT 버튼을 만들었습니다.
<button onmouseover="cancelFunction(event)">CLICK IT</button>
cancelFunction(event) 메서드는 전달된 이벤트 객체의 event.cancelable 값을 확인하고 변수 x에 할당합니다. 조건문을 사용하여 event.cancellable이 true 또는 false를 반환했는지 확인한 다음 id가 "Sample"과 동일한 단락 태그에 적절한 메시지를 표시합니다 -
function cancelFunction(event) {
var x = event.cancelable;
if(x==true)
document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
else
document.getElementById("Sample").innerHTML = "The onmouseover event is not cancellable";
}