HTML 이벤트 속성을 사용하지 않고 JavaScript에서 양식 제출 이벤트를 어떻게 수신할 수 있습니까?

HTML 이벤트 속성 없이 JavaScript에서 양식 제출 이벤트 수신

웹 개발에서 양식 제출 이벤트를 처리하는 것은 사용자 입력을 검증하고 사용자 정의 작업을 수행하는 데 필수적입니다. 전통적으로 개발자는 onSubmit 또는 onClick과 같은 HTML 속성을 사용하여 이러한 이벤트를 수신했습니다. 그러나 이 접근 방식을 사용하려면 HTML 코드를 수정해야 하므로 불편하고 오류가 발생하기 쉽습니다.

이벤트 리스너로 수신

HTML 이벤트 속성 없이 순수 JavaScript로 양식 제출 이벤트를 수신하려면 다음을 활용하세요. EventTarget 인터페이스의 addEventListener() 메소드. 이를 통해 HTML 마크업을 수정하지 않고도 양식 요소에 이벤트 리스너를 연결할 수 있습니다.

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

양식이 제출될 때마다 eventHandler 함수가 실행됩니다. 이 함수 내에서 유효성 검사 논리 또는 기타 사용자 정의 작업을 수행할 수 있습니다.

기본 양식 제출 방지

기본 양식 제출 동작을 방지하려면 이벤트에서 PreventDefault() 메서드를 호출하세요. 이벤트 핸들러 내의 객체:

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

EventTarget.addEventListener 사용

EventTarget.addEventListener 메소드는 최신 브라우저에서 널리 지원됩니다. 양식 요소를 포함하여 다양한 DOM 요소에서 이벤트를 수신하기 위한 크로스 브라우저 솔루션을 제공합니다.

라이브러리를 사용한 대안

라이브러리 사용을 선호하는 경우 다음 옵션을 고려하세요.

• jQuery: $(ele).submit(callback);
• 반응: const callback = (event) => {};
• Vue: @submit="mySubmitHandler"

위 내용은 HTML 이벤트 속성을 사용하지 않고 JavaScript에서 양식 제출 이벤트를 어떻게 수신할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!