HTML을 수정하지 않고 JavaScript에서 양식 제출 이벤트 듣기

이 문서에서는 HTML을 수정하지 않고 양식 제출 이벤트를 듣는 일반적인 문제를 해결합니다. HTML 코드를 수정해야 합니다. HTML의 onClick 또는 onSubmit 속성에 의존하는 대신 순수한 JavaScript 솔루션을 제공합니다.

이를 달성하기 위해 EventTarget.addEventListener 메소드를 활용합니다. 이 메소드를 사용하면 양식 요소에서 특정 이벤트가 발생할 때 실행될 콜백 함수를 등록할 수 있습니다.

var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}

"ele"를 양식 요소에 대한 참조로 바꾸고 "콜백"을 양식이 제출될 때 실행하려는 함수로 바꾸세요.

기본 양식 제출 동작을 방지하려면(예: , 페이지 새로 고침) 콜백 함수 내에서 .preventDefault() 메서드를 사용합니다.

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

라이브러리를 사용하여 이벤트 제출 듣기

필요하지 않지만 제출 이벤트를 듣기 위해 라이브러리를 사용하는 것이 더 나을 수도 있습니다. 공통 라이브러리를 사용하여 이를 수행할 수 있는 방법은 다음과 같습니다.

jQuery

$(ele).submit(callback);

예

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

이러한 기술을 사용하면 다음을 수행할 수 있습니다. HTML 코드를 건드릴 필요 없이 JavaScript로 양식 제출 이벤트를 쉽게 들을 수 있습니다.