e.preventDefault()

 

 

 

HTML 코드

 

 <div class="black-bg">

        <div class="white-bg">

            <h4>로그인 하세용</h4>

            <form action="success.html">

 

                <div class="my-3">

                    <input type="text" class="form-control" id = "id">

                </div>

                <div class="my-3">

                    <input type="password" class="form-control"  id = "pw" >

            

 

 

                </div>

                <button type="submit" class="btn btn-primary">전송</button>

                <button type="button" class="btn btn-danger" id="close">닫기</button>

            </form> 

            

 

        </div>

    </div>

 

 

JavaScript 코드

 

   let id = document.querySelector('#id');

        let pw = document.querySelector('#pw');

 

        $('.btn-primary').on('click', checkForm);

        

        function checkForm(e){    

            // 여기서 매개변수 e를 넣는건, 이벤트가 발생했을때, 그 이벤트에 대한 정보를 제공하기 위해서 .  

            // 이걸 넣지 않으면 e.preventDefault()가 안먹음       

            if(id.value === ""){

                alert("아뒤 입력요망");

                e.preventDefault()  

                // 이벤트가 발생되었을때, 기본적으로 수행되도록 한 동작을 중단시긴다.  현재 상황에서는 다른 html 로 넘어가도록 되어있음.

            } else if(pw.value ===""){

                alert("비번 입력요망");

                e.preventDefault()

            }

        };

 

 

 

 

정리 

e.preventDefault()  

이벤트가 발생되면 기본적으로 수항되도록 한 동작 중단됨.

 

유의사항. 함수가 실행될때 파라미터 값으로 e를 넣어야 함.

그래야 이벤트가 발생했을때, 그 이벤트에 대한 정보를 제공이 가능함.