[Javascript] form태그의 onSubmit 속성 알아보기

작성개요

현재 회사에서 Laravel을 기반으로 개발중에 있습니다. view단에서 blade템플릿 뿐만아니라 Javascript 도 적재적소에 맞게 사용하고 있는데 Javascript의 개념 또는 동작하는 방식등을 잊지 않기 위해 기록합니다.

STEP 1. form 태그의 onSubmit={}

    <form id="myForm" onSubmit={handleMyForm()} action="">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" ><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" ><br><br>
        <input type="submit" value="Submit">
    </form>

form 태그에 onSubmit 속성이 있습니다. onSubmit은 buntton의 submit 버튼이 눌린 직후 처리할 함수를 인자로 갖습니다. 위에서는 handleMyForm() 함수를 호출해 event를 처리합니다. handleMyForm()코드는 아래와 같습니다.

    <script>
        function handleMyForm() {
            event.preventDefault();
            console.log("찍힐까요?");
        }
    </script>

event는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점입니다. event.preventDefault()를 이용해 기본적으로 동작하는 event의 동작을 막을 수 있습니다. 여기서 event.preventDefault()를 통해 화면이 새로고침되는 동작을 막습니다.

STEP 2. event deprecated!

사진처럼 event는 deprecated되었음을 확인할 수 있습니다. 따라서 이벤트를 처리하기 위한 대안으로 이벤트 리스너를 사용을 하면 됩니다.

사용법은 아래와 같습니다.

form태그에서 onSubmit 이벤트가 발생한다면, addEvenetListner()에서 이를 캐치하고, (click되었음!) event를 함수로 넘겨주는 방식입니다.