HTML을 수정하지 않고 JavaScript에서 양식 제출 이벤트를 듣는 방법은 무엇입니까?

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

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

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

<code class="javascript">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
}</code>

"ele"를 양식 요소에 대한 참조로 바꾸고 "callback"을 함수로 바꿉니다. 양식이 제출될 때 실행하려고 합니다.

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

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

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

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

jQuery

<code class="javascript">$(ele).submit(callback);</code>

예

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

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

위 내용은 HTML을 수정하지 않고 JavaScript에서 양식 제출 이벤트를 듣는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!