아래의 전문은 mozila.org 에서 퍼온 것이다.
참고하면 돼며, 나는 주로 form태그 에서 submit누른후 바로 실행되는 함수의 refresh를 막고 submit이후에 좀더 실행할 액션들을 적용하고 싶을 때 preventDefault()함수를 사용한다.
그 예는 아래와 같다.
$('#testForm').submit(function(e) {
e.preventDefault();
common_modal({
content : '해당 내용을 등록하시겠습니까?',
submit : function() {
$.post(testForm.SAVE, $('#testForm').serialize(), function(data) {
if( data.rs_st == cmConst.RS_SUCC ) {
backListWithParam(testForm.LIST);
} else {
commonErrorModal();
}
}).error(function(request,status,error){
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
})
}
});
});
아래부터는 mozila의 전문이다
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.
구문
event.preventDefault()
예제
다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다.
<html>
<head>
<title>preventDefault 예제</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>체크박스 컨트롤을 클릭해 주세요</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">체크박스</label>
</form>
</body>
</html>preventDefault의 예제를 여기에서 확인할 수 있습니다.
아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.
<html>
<head>
<title>preventDefault 예제</title>
<script type="text/javascript">
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert("소문자만 입력할 수 있습니다." + "\n"
+ "charCode: " + charCode + "\n"
);
}
}
}
</script>
</head>
<body>
<p>당신의 이름을 소문자만으로 입력해주세요.</p>
<form>
<input type="text" onkeypress="checkName(event);"/>
</form>
</body>
</html>주의
이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.
이벤트의 취소가능 여부는 event.cancelable를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.
preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 event.stopPropagation를 사용해주세요.
출처: https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
'Dev' 카테고리의 다른 글
| ECLIPSE에서 .PROPERTIES 파일의 한글이 깨질경우 (0) | 2019.12.10 |
|---|---|
| 이클립스 설치된 market place 플러그인 삭제 (uninstall안될시 하는 강제삭제 방법!) (0) | 2019.12.10 |
