반응형
기본동작의 취소
웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
- 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
- 폼에서 submit 버튼을 누르면 데이터가 전송된다.
- a 태그를 클릭하면 href 속성의 URL로 이동한다.
이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다.
inline
이벤트의 리턴값이 false이면 기본 동작이 취소된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>
<label>이벤트 발생 방지 </label><input id="jinseok" type="checkbox" name="eventjinseok" value="on" />
</p>
<p>
<a href="https://k0502s.tistory.com/" onclick="if(document.getElementById('jinseok').checked) return false;">블로그</a>
</p>
<p>
<form action="https://k0502s.tistory.com/" onsubmit="if(document.getElementById('jinseok').checked) return false;">
<input type="submit"/>
</form>
</body>
</html>
property 방식
리턴 값이 false이어도 기본동작이 취소된다.
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('jinseok').checked)
return false;
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('jinseok').checked)
return false;
};
</script>
</body>
</html>
addEventListener 방식
이벤트 객체의 preventDefault 메소드를 실행해도 기본 동작이 취소된다.
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('jinseok').checked)
event.preventDefault();
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('jinseok').checked)
event.preventDefault();
};
</script>
※ ie9 이하 버전에서는 event.returnValue를 false로 해야 한다.
반응형
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| Javascript 이벤트 타입 - 문서 로딩 (0) | 2020.11.26 |
|---|---|
| Javascript 이벤트 타입 - 폼(form) (0) | 2020.11.26 |
| Javascript 이벤트 전파 - 버블링과 캡처링 (0) | 2020.11.23 |
| Javascript 이벤트 - 등록방법 (0) | 2020.11.23 |
| Javascript 이벤트 (0) | 2020.11.23 |
댓글