반응형
Notice
Recent Posts
Recent Comments
Link
불로구
자바스크립트 - 이벤트 타겟, 이벤트 취소( (preventDefault() ) 본문
반응형
이벤트 타겟과 target 프로퍼티
- target 프로퍼티는 이벤트 타겟 객체를 가리킨다.
- 이벤트 타켓이란 이벤트를 유발시킨 객체
이벤트 객체의 프로퍼티를 출력해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded",init,false);
function init(){
let btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click",function(e){
let text = "type : " + e.type + "<br>" + "target : " + e.targer
+ "<br>" + "currentTarget : " + e.currentTarget + "<br>"
+ "defaultPrevented :" + e.defaultPrevented;
let pTag = document.getElementById("p");
pTag.innerHTML = text;
},false);
}
</script>
</head>
<body>
<h3>targer</h3>
<p id="p">버튼 클릭하면 객체 출력</p>
<button>클릭</button>
</body>
</html>
클릭 전
클릭 후
type |
프로퍼티 |
현재 발생한 이벤트 종류 나타냄 |
target |
프로퍼티 |
이벤트 발생시킨 객체 |
currentTarget |
프로퍼티 |
현재 이벤트 리스너 실행 중인 DOM 객체 |
defaultPrevented |
프로퍼티 |
이벤트의 디폴트 행동이 취소됐는지 T/F |
preventDefault |
메소드 |
이벤트의 디폴트 행동 취소 메소드 |
이벤트의 디폴트 행동 취소, preventDefault()
- 이벤트의 디폴트 행동을 취소시키는 메소드
1) 이벤트 리스너에서 false를 리턴하기
<a href="http://www.naver.com" onclick="return false">이동 불가</a>
2) 체크박스 활용
3) preventDefault() 호출
<a href="http://www.naver.com" onclick="event.preventDefault()">이동불가</a>
과연 모든 이벤트의 디폴트 행동을 금지할 수 있는가?!
- 모든 이벤트에 대해 행동을 취소할 수 있는 것은 아니다!
- 이벤트 객체의 cancelable 프로퍼티가 true인 경우만 취소가 가능하다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function noAction(e){
e.preventDefault();
}
</script>
</head>
<body>
<a href="http://www.naver.com" onclick="noAction(event)">네이버 이동</a>
</body>
</html>
네이버 이동을 클릭해도 아무런 행동이 나타나지 않는다!
혹시나 궁금한 점은 댓글로 남겨주세요!
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
자바스크립트 - 마우스 핸들링 (0) | 2020.06.30 |
---|---|
자바스크립트 - 이벤트 흐름 ( 캡쳐 단계, 버블 단계) (0) | 2020.06.26 |
자바스크립트 - 이벤트 객체 (0) | 2020.06.25 |
자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수 (0) | 2020.06.25 |
자바스크립트 - DOM 객체 생성, 삽입, 삭제 (0) | 2020.06.22 |
Comments