728x90
Javascript - preventDefault
자바스크립트에서는 편의를 위해
이벤트가 기본 설정되어 있는 태그가 존재한다.
(예: a태그 클릭시, href 주소로 자동 이동 or 새로고침)
프로그램 작성자가 해당 기본 설정 기능의
사용을 원치 않는 경우에는
다음과 같은 명령어가 필요하다.
event.preventDefault();
샘플 예제 ↓
[Html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 설정 이벤트 기능 삭제 예제</title>
</head>
<body>
<h1>기본 설정 이벤트 기능 삭제 예제</h1>
<a href="https://goodmemory.tistory.com/">클릭!</a>
</body>
</html>
[Javascript]
let aTag = document.querySelector('body>a');
aTag.addEventListener('click',function(e){
alert('클릭!');
});
[결과]
당연한 결과이지만,
아래 스크립트 추가를 통해
a태그의 기본 설정된 디폴트 이벤트를 없애고,
알림창만 띄워보자
[Javascript]
let aTag = document.querySelector('body>a');
aTag.addEventListener('click',function(e){
//기본 이벤트 동작 x
e.preventDefault();
alert('클릭!');
});
[결과]
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 이벤트의 추가 addEventListener() (0) | 2021.02.02 |
|---|---|
| [Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() (0) | 2021.02.02 |
| [Javascript] 노드복사 importNode (3) | 2021.02.01 |
| [Javascript] 부모 태그 찾기 .parentElement (0) | 2021.01.31 |
| [Javascript] ClassList .contains/.add/.remove/.toggle (0) | 2021.01.31 |
댓글