onSubmit / onClick / onChange

230125 ver.

 

문득 비슷한 것 같으면서도 정확히 무슨 차이인지 몰라서 찾아봤다.

그저 느낌만으로 사용해왔는데, 정리함으로써 조금 정리됐다.

 

onSubmit 과 onClick 공통점

- 자바스크립트를 호출하기 위해 사용되는 EventHandler 

 

onSubmit

- form 태그 내부에서만 사용 가능

- form이 submit(제출)될 때 발생하는 이벤트

- form안에 있는 것을 validate(검증) 한 후에 return이 true, false 일 경우에 호출되는 역할을 하는 이벤트핸들러 

- 기본적으로 호출될 때, 새로고침 효과가 발생한다.

- e.preventDefault(); 를 작성하면 새로고침이 되지 않도록 할 수 있다.

 

onClick

- form 태그와 무관하게 사용 가능, 즉 외부에서도 사용 가

- form에서 직접 자바스크립트를 호출하는 역할

- 원하는 태그에 넣어서 사용자가 클릭했을 때 발생하는 이벤트

 

그렇다면 굳이 onSumbit을 사용해야 할 때가 있을까?

 

onChange

- HTML 요소에 변화가 일어날 때 사용 (ex. 텍스트 입력칸 변경 등)

- 내용(이벤트)가 변경되었을 때 감지한다.