개인과제를 진행하다가 검색 입력값을 받아 포함되는 자료만 보여주도록 하는 함수를 작성중이었는데.. 왜인지 모르게 자꾸 변화가 없었다.
자세히 보니 변화가 있는데 0.5초만에 다시 원상복구가 되어버린 것이다..
이것 저것 찾아보고 바꿔보고 별 짓을 다했는데도 자꾸만 새로고침 되어버려서
어떻게든 구글링으로 찾아보니 onSubmit이 문제였던 것..!
어느부분에서 문제인지를 모르니 찾는 것에도 오래 걸린 듯 하다..
onSubmit
form 태그에서 입력받은 값은 onSubmit으로 넘겨줄 수 있다.
이는 form 태그에서만 사용 가능하며 form 태그 밖에선 사용 불가능하다.
그리고..
form태그 안에 있는 input 박스에서 엔터를 누르거나 클릭으로 전송을 하면 form 내용이 전송되며 자동으로 새로고침이 된다.
onSubmit으로 호출된 함수가 실행되어 무언가가 바뀌었다면
순식간에 새로고침되어 원래 상태로 복구되어버린다.
해결 방법
해결 방법에는 두 가지를 해보았는데,
1. button의 type을 'button'으로 사용
-
type을 submit이 아닌 button으로 변경하여 주는 간편한 방법이다.
-
새로고침이 일어나지 않으며, 대신 form안의 입력값은 전송되지 않는다
(예???) -
그러므로 form 값에 접근하기 위해 다른 방법을 사용해야 한다.
그렇게 좋은 방법은 아닌 듯 보였다..
2. event.preventDefault() 사용
-
호출 함수에 매개변수를 추가해주고, event.preventDefault()를 사용해준다.
-
해당 메서드는
어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. -
즉, onSubmit의 새로고침을 실행하지 않도록 지정해주는 것.
사용 예제
function submit(event) { event.preventDefault(); console.log(event); }
이 방법을 사용해서 본인은 문제를 해결하였다!
위 방법으로 새로고침을 방지할 수 있으며, 그 외에도 여러 방면으로 사용이 가능한데,
-
기본 클릭 동작 방지하기
- 체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것이다. -
키 입력이 입력 칸을 채우는 것을 방지하기
- preventDefault()를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 한다.
두 가지 기능이 있었다. 자세한 내용이다 예제는 모질라 에서 확인해볼 수 있다!
마치며..
오늘 onSubmit과 사투를 벌이느라 시간을 많이 뺏겼다..
javascript는 콜 스택이나 메모리 관련 공부 및 호이스팅, 콜백함수 등등에 대해서 배우고 있는데, 이전까지는 그래도 아는 내용 많아서 수월했었지만 이제는 머릿속에 잘 넣어서 공부해야겠다.. (어렵다..ㅠ)
