[JavaScript] 폼 이벤트와 PreventDefault

Zero·2023년 3월 10일
0

JavaScript

목록 보기
27/35

submit 이벤트

폼 전송 시 이벤트

폼 요소의 submit 이벤트를 감시하여 폼 전송 전 추가 작업을 처리할 수 있다.
해당 이벤트로 폼 전송 전의 데이터를 가공하거나 데이터 전송 여부를 확인할 수 있다. 전송 취소 후 재입력을 요구하고 싶을 때는 event.preventDefault()를 사용해 이벤트를 해제한다.

예를 들어, form에서 submit button을 눌러도 event.preventDefault()와 함께라면 submit 액션은 일어나지 않는다. 또한 링크를 클릭해도 event.preventDefault()를 사용하면 URL로 이동하지 않는다.

또, preventDefault() 메소드는 DOM에 걸쳐서 발생하는 further propagation of an event를 방지하지 않는다. 이를 위해서는 stopPropagation() 메소드를 사용해라 (stopPropagation은 이벤트가 상위 엘리먼트로 전달되는 것을 방지한다.)

예시

--> submit 버튼을 통해 form 제출을 수행하여도 preventDefault() 를 통해서 form 제출 시 action의 지정값으로 submit 되는 default 기능을 막아준다.

0개의 댓글