이벤트의 디폴트 행동 취소
<title>이벤트의 디폴트 행동 취소</title>
<script>
function query(){
var ret = confirm("다음으로 이동하시겠습니다?");
return ret; //confirm()의 리턴 값은 true 또는 false
// true 라면 다음사이트로 이동하고 false 라면 이동하지 않는다.
}
function noAction(e){
e.preventDefault(); //이벤트의 디폴트행동 강제취소
}
</script>
</head>
<body>
<h3>이벤트의 디폴트 행동 취소</h3>
<hr>
<a href="http://www.daum.net"
onclick="return query()">
다음으로 이동할 지 물어보는 링크</a>
<hr>
<form>
<input type="checkbox">빵(체크됨)<br>
<input type="checkbox" onclick="noAction(event)">술(체크안됨)
</form>
</body>
* 중요 * 다음으로 이동한지 물어보는 링크를 클릭하게 되면 위와같이 query () 메서드가 실행되서
창이 표시 되는데 확인은 누르면 confirm() 에 true 값이 들어가게되고 취소를 누르면 false 값이 들어가게된다.
그러므로 true 가 된다면 다음사이트로 넘어가고 false 라면 넘어가지 않게 된다.
*중요* 이벤트 디폴트 행동 취소
<form> 태그에서 빵과 술의 타입을 checkbox 했지만 술에는 클릭하면 noAction 함수가 활용되도록 되어있다.
noAction 함수에는 preventDefault () 가 적용되어있어서 이벤트의 행동을 강제 취소하는 효과가 있으므로
술 과 빵 모두 checkbox 되어있지만 술에는 강제취소 효과 때문에 체크가 되지 않는다.
'국비 과정 > JavaScript' 카테고리의 다른 글
| 국비 - 0927 ( Screen ) (2) | 2022.09.27 |
|---|---|
| 국비 - 0926 ( BOM ) (0) | 2022.09.27 |
| 국비 - 0922 ( Math 객체 , Object 객체 , DOM) (0) | 2022.09.22 |
| 국비 - 0921 ( Javascript 의 객체와 배열 ) (0) | 2022.09.21 |
| 국비 - 0920 ( funtion ) (4) | 2022.09.20 |
