자바스크립트에서 event를 컨트롤 할 때 preventDefault라는 메서드를 자주 접하게 된다.
event.preventDefault()는 해당 event가 cancelable 할때 (cancelable이 true일 때) 해당 이벤트의 기본 동작의 수행을 막는 메서드이다. 모든 event가 cancelable 하지는 않으니 모든 이벤트에 유효한 메서드는 아니다. cancelable 하지 않은 이벤트는 preventDefault를 호출해도 아무 반응이 일어나지 않는다.
예를 들어서 체크박스의 클릭이벤트를 막아 체크박스를 체크하지 못하게 만든다거나, submit 이벤트에 사용하여 데이터를 전송하지 못하게 하는 등 다양한 방면에서 사용 가능하다.
그러나 preventDefault는 이벤트 전파를 막지는 못합니다. 상위요소로의 이벤트 전파를 막기 위해서는 stopPropagation() 또는 stopImmediatePropagation()을 함께 사용해야합니다.
참고
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
Event.preventDefault() - Web API | MDN
Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.
developer.mozilla.org
'프론트엔드 > javascript' 카테고리의 다른 글
| [javascript] Map ? (0) | 2022.02.03 |
|---|---|
| [javascript] Set ? (0) | 2022.02.03 |
| [javascript] Array map, filter, reduce 사용법 (0) | 2022.01.10 |
| [javascript] setTimeout 자세히알기(2) 부제: 자바스크립트 런타임 (0) | 2022.01.06 |
| [javascript] setTimeout 자세히알기(1) 부제: setTimeout의 콜백 호출이 지연되는 경우 (0) | 2022.01.04 |