[JavaScript] submit과 click

submit과 click 둘다 사용자submit과 click 둘다 사용자 인터렉션의 반응하는 이벤트들 이지만 적용대상의 차이가 있다

submit은 form태그에서 사용하게 되는데 <button type="submit"> 또는 <input type="submit"> 두 요소가 클릭되거나 엔터를 누르게 되면 이벤트가 발생한다.
그리고 이벤트가 발생하고 난 후에는 새로고침을 실행한다

그래서 주로 form 데이터가 서버로 전송되는 것을 처리하기 위한 이벤트로 사용한다. form 유효성 검사를 수행하거나, form 전송 전에 특정 작업을 수행하는 데 사용하는 등 이 있다

특징은 아래와 같다

- form 요소에 이벤트 리스너를 부착해야 한다.
- 기본 동작은 form 데이터를 action 속성에 지정된 URL로 전송하고 페이지를 새로고침하는 동작인데
- event.preventDefault() 메서드를 사용하여 기본 동작을 막을 수 있다
- form 내부의 <button type="submit"> 또는 <input type="submit"> 요소가 없어도, JavaScript에서 form.submit() 메서드를    호출하여 강제로 발생시킬 수 있다.
- submit 이벤트가 발생할 때, 어떤 버튼이 폼 제출을 유발했는지 알 수 있는 submitter 속성이 SubmitEvent 객체에 포함

click은 거의 모든 HTML 요소에 발생할 수 있다. 주로 버튼, 링크, 이미지, div, span 등이 가능한 요소이다.

사용자가 특정 요소를 클릭했을 때 특정 동작을 수행하기 위한 이벤트로 submit과 달리 form 제출 외에도 다양한 UI 변경, 데이터 로딩, 페이지 이동 등 광범위한 용도로 사용될 수 있다.

클릭의 특징은 아래와 같다

- 클릭된 요소에 직접 이벤트 리스너를 부착합니다.
- 기본 동작은 요소의 종류에 따라 다르다. 예를 들어, 링크의 경우 href 속성에 지정된 URL로 이동하고, 버튼의 경우 특별      한 기본 동작이 없을 수 있다. <input type="submit"> 버튼의 기본 동작은 form을 제출하는 것이지만, click 이벤트 리스너    내에서 event.preventDefault()를 호출하면 이 기본 동작을 막아서 사용할 수 있다.
- click 이벤트는 마우스 클릭뿐만 아니라 키보드 접근성(예: 버튼에 포커스된 상태에서 Enter 또는 Spacebar 키 누르기)으    로도 발생할 수 있습니다.

submit은 클릭과 엔터 둘다 이벤트가 작동하지만 click은 직접 등록해주어야 한다.

쉬운 사용 방법으로

button.keypress(function (event) {
      if (event.which === 13) {
        button.click();
        return false;
      }
    });

위와 같은 코드로 이벤트를 처리할 수 있다.
event.which === 13 이 코드가 입력된 값이 엔터인지 구분해주고 button.click()으로 클릭 이벤트를 발생 시키면
click리스너를 넣어두었다면 해당 리스너가 호출된다.