JavaScript <event 3> 기본 행동 방지 이벤트

⭐ 기본 행동 방지

- 텍스트 피드가 비워져있는지를 검사하는 onsubmit 이벤트 핸들러 구현

: 비였다면 이벤트 객체에 있는 양식 제출을 멈추도록 지정

: 양식 아래에 있는 단락에 에러 메시지를 표시

- querySelector(All): HTML의 요소를 참조
- getElementById('id값'): 해당 id값을 가진 요소를 참조

const form = document.querySelector('form');

const fname = document.getElementById('fname');

const email = document.getElementById('email');

const para = document.querySelector('p');

 

form.onsubmit = function(e) {

  if (fname.value === '' || email.value === '') {

    e.preventDefault();

    para.textContent = '이름과 이메일 모두 입력해야만 합니다.';

    }

    }

 

이름과 이메일을 작성하는 form 요소
: 이름과 이메일을 반드시 작성하도록 설정
  
- 참조된 요소의 값(내용)을 가져올 땐
: 참조값.value 속성을 사용

>> input 창의 값은 string 타입이기 때문에, 비워질 경우 빈 문자열로 반환

- 기본 행동을 방지하는 메서드
- sumbit 버튼을 클릭할 때 자동 전송되는 기능 등
: 양식 제출, 링크 이동 등의 기본 해동을 방지하는 메서드

- 조건식의 내용을 확인하여 조건이 일치하지 않을 경우에만 전송이 실행
: 이름과 이메일이 모두 입력된 경우