[DOM_Event] JS - preventDefault() 메서드 ★★★ - 요소 이벤트 기본동작 차단. (= 기본작동차단 = 기본작동중지 = 기본작동금지 = preventDefault메서드 = 프리벤트디폴트메서드) ※ 링크클릭방지, 체크방지, 링크클

1. preventDefault() 예제 - 링크클릭방지
2. preventDefault() 정의
3. preventDefault() 구문
4. preventDefault() 예제 - 체크박스 작동 안 되게 하기

preventDefault() 예제 - 링크클릭방지

 

<a id="hz" href="https://homzzang.com">홈짱닷컴 Homzzang.com</a>

<script>

document.getElementById("hz").addEventListener("click", function(event){

    event.preventDefault()

});

</script>

결과보기

preventDefault() 정의

 

해당 요소의 기본 동작 차단.

 

---

 

1. 

• preventDefault() 메서드는 취소 가능 시 이벤트에 속한 기본 동작을 취소시킴. (예) ① 확인 버튼 눌러도 작동 않게 동작 차단. ② 링크 버튼 눌러도 작동 않게 동작 차단.
• 모든 이벤트를 취소할 수 있는 건 아님. 
• cancelable 속성을 이용해 취소 가능한지 확인.

2.  cf.

• preventDefault() 메서드 - DOM 통한 이벤트 전파 차단 X
• stopPropagation() 메서드 - DOM 통한 이벤트 전파 차단 O

3. 

• DOM 버전: DOM Level 2 Events
• IE 9 이상 주요 최신브라우저 지원.

 

4.

이벤트가 적용되는 대상 요소: event.target

 

5. MDN preventDefault() 예제보기

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

 

preventDefault() 구문

 

event.preventDefault()

 

---

[매개변수]

 

없음

 

---

[반환값]

 

없음

 

preventDefault() 예제 - 체크박스 작동 안 되게 하기

동의 <input type="checkbox" id="hz">

<script>

document.getElementById("hz").addEventListener("click", function(event){

    event.preventDefault()

});

</script>

결과보기