이벤트 객체중의 하나인 이벤트 중단 기능
| preventDefault() | 고유특성을 가진 태그의 이벤트를 제거 ㄴ a와 submit은 고유 이벤트를 가지고 있다. |
a와 submit은 고유 이벤트를 갖고 있어 핸들링하려면 고유 이벤트를 중단시켜줘야 한다.
예제 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul class="page">
<li><a href="list.board">1</a></li>
<li><a href="list.board">2</a></li>
<li><a href="list.board">3</a></li>
<li><a href="list.board">4</a></li>
<li><a href="list.board">5</a></li>
</ul>
</div>
<script>
var page = document.querySelector('.page');
//a태그는 클릭과 동시에 넘어가기 때문에 핸들링 할 수 없음
page.onclick = function(){
event.preventDefault(); //a태그 or submit이 가진 기본 이벤트를 중단
if(event.target.tagName != "A") return; //A가 아니라면 종료
console.log(event.target.innerHTML);
//처리....
}
</script>
<hr>
<form action="https://www.naver.com">
<input type="text" name="age">
<input type="submit" value="클릭" id="btn">
</form>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
event.preventDefault(); //submit의 고유이벤트 중단
//처리....
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| JS | 토글탭 실습 (1) | 2023.01.03 |
|---|---|
| JS | 이벤트 위임 원리 (0) | 2023.01.03 |
| JS | 이벤트 객체 (0) | 2023.01.03 |
| JS | 실습 2 (toggle) (0) | 2023.01.03 |
| JS | 클래스 속성 제어하기 (0) | 2023.01.02 |